I would like to create a tab or label like look using only CSS and no images if possible. Here is what I mean:
I can create one end but I have not been able to create the triangle point. Is it possible to do this with only CSS?
There are indeed ways to create CSS triangles, here's a part from css-tricks.com:
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
http://css-tricks.com/snippets/css/css-triangle/
Yes, but not while supporting IE7:
<a class="tab">Your label text</a>
.tab {
background: black;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
position: relative;
}
.tab::before {
content: " ";
position: absolute;
right: 100%;
top: 0;
width: 0;
height: 0;
border-width: 35px; /* play with this value to match the height of the tab */
border-style: solid;
border-color: transparent black transparent transparent;
}
This should be a good beginning
http://css-tricks.com/snippets/css/css-triangle/
HTML
<div class="arrow-left"></div>
<div class="arrow-body"></div>
CSS
.arrow-left { float:left; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right:20px solid blue; }
.arrow-body{ float:left; width:200px; height:40px; background-color:Blue;}
Here is another one
<div></div>
div{
width:500px;
height:100px;
background-color:black;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
margin-left:100px;
}
div:before{
width:0;
height:0;
content:"";
display:inline-block;
border-top:50px solid transparent;
border-right:100px solid black;
border-bottom:50px solid transparent;
position:absolute;
left:0;
}
http://jsfiddle.net/e8feE/
Related
I am trying to make this in CSS.
But this is how it renders in IE11.
My code below works in Chrome, but not in IE 11. "www.CanIUse.com" says the clip rule works in IE11. What is wrong with my CSS?
body{margin: 50px;}
.bracket-container {
position: relative;
border: 0px solid green;
width: 25px;
height: 58px;
width: 25px;
padding: 0;
margin: 0;
}
#square-clip{
width: 24px;
height: 50px;
background: none;
border: 4px solid red;
border-left: 0;
border-radius: 8px;
clip: (0, 0,0, 25px);
position: absolute;
left:0;
}
#triangle-right {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 10px solid red;
border-bottom: 8px solid transparent;
position: absolute;
right:-12px;
top: 21px;
}
<h3>Using the new CSS Clip-path</h3>
https://caniuse.com/#search=clip-path</br>
<div class="bracket-container">
<div id="triangle-right"></div>
<div id="square-clip-path"></div>
</div>
<div class="bracket-container">
<div id="triangle-right"></div>
<div id="square-clip"></div>
</div>
No need to use clip at all, nor multiple divs.
Use just one, adjust the borders as needed for the bracket body, then a pseudo element for the triangle with the good ol' borders triangle technique
.bracket{
border: 4px solid red;
width:100px; height:150px;
border-left:none;
border-radius:0 10% 10% 0;
position:relative;
}
.bracket::after{
content:"";
width:20px; height:20px;
position:absolute;
left:100%;
top:50%; transform:translateY(-50%);
box-sizing:border-box;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
border-left:15px solid red;
}
<div class="bracket"> </div>
I have no idea how can I put an arrow in the same color of my div pointing to the IMAGE text.
Some ideas? how can I do this?
https://jsfiddle.net/fvvrLqLp/
#arrow{
background-color:#FFD600;
color:#fff;
border-radius:15px;
padding:5px;
z-index:999;
max-width:150px;
}
html:
image<br><br>
<div id="arrow">
text
</div>
thank you friends!
I suppose you're looking for something like that:
#arrow {
background-color: #FFD600;
color: #fff;
border-radius: 15px;
padding: 5px;
z-index: 999;
max-width: 150px;
position: relative;
}
#arrow:before {
position: absolute;
top: -10px;
left: 20px;
content: '';
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #ffd600;
}
An example: https://jsfiddle.net/fvvrLqLp/1/
You need to create the triangle with css into a pseudo element and position it accordingly to the needed position.
Is it possible to create a complete arrow using CSS?
This is how I create just the head of the arrow: http://jsfiddle.net/2fsoz6ye/
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
}
But I also need the back part of the arrow. Just to look like this:
And after this I want to rotate the CSS-arrow, so I would be able to use it dynamically... i.e. pointing to the top, left, 45°...
Just have a look at this fiddle: http://jsfiddle.net/2fsoz6ye/2/
.container{
transform: rotate(30deg);
width:60px; height:40px; background:#ccc; margin:100px auto;}
.arrow-right {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #ccc;
float:right;
margin-top:-20px;
margin-right:-40px;
}
I am trying to represent my HTML/CSS tab like on the picture.
I have already tried lots of things with border-radius without any success.
Do you have any tracks so that I can reproduce my tabs like the picture only with CSS?
In order to make the same borders (also inside the triangles) as in the image, you can use pseudo elements and transform rotate :
DEMO
output :
HTML :
<div>Critiques</div>
<div>Messages sur le forum</div>
<div>Actualités</div>
CSS :
div{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
padding-right:12px;
line-height:50px;
float:left;
width:200px;
position:relative;
z-index:0;
text-align:center;
}
div:after,div:before{
content:'';
position:absolute;
width:10px;
height:10px;
background:#fff;
z-index:999;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
div:before{
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
top:0; left:-12px;
-ms-transform-origin:100% 0;
-webkit-transform-origin:100% 0;
transform-origin:100% 0;
}
div:after{
border-left:1px solid #ccc;
border-top:1px solid #ccc;
bottom:0;
right:4px;
-ms-transform-origin:0 100%;
-webkit-transform-origin:0 100%;
transform-origin:0 100%;
}
div:first-child:before, div:last-child:after{
display:none;
}
You could that with css only but with an empty span (If you would like to have half triangles in the edges):
HTML
<ul>
<li><span></span>one</li>
<li><span></span>two</li>
<li><span></span>three</li>
</ul>
CSS
ul {
font-size: 0;
}
li {
background: red;
display: inline-block;
padding: 30px;
font-size: 15px;
position: relative;
}
span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
li:after {
width: 0;
height: 0;
border-top: 10px solid white;
border-left: 10px solid transparent;
position: absolute;
right: 0;
top: 0;
content: "";
}
li:before {
width: 0;
height: 0;
border-top: 10px solid white;
border-right: 10px solid transparent;
position: absolute;
left: 0;
top: 0;
content: "";
}
span:before {
width: 0;
height: 0;
border-bottom: 10px solid white;
border-right: 10px solid transparent;
position: absolute;
left: 0;
bottom: 0;
content: "";
}
span:after {
width: 0;
height: 0;
border-bottom: 10px solid white;
border-left: 10px solid transparent;
position: absolute;
right: 0;
bottom: 0;
content: "";
}
An example: http://jsfiddle.net/fC9Fs/
Here is another take on it:
This one works with a basic list and no other HTML is needed.
Also as you've shown in your image, the first and last elements do not have the arrow.
Fiddle
HTML:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
CSS:
html, body{
background:#E5E2E2;
}
ul{
display:inline-block;
list-style-type:none;
border:1px solid #CCCCCC;
padding:0;
}
li{
float:left;
padding:10px 15px;
background:#F4F4F4;
position:relative;
}
li:nth-child(n+2):before{
content:'';
position:absolute;
left:-5px;
top:-1px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #e5e2e2;
}
li:nth-child(n+2):after{
content:'';
position:absolute;
left:-5px;
bottom:-1px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #e5e2e2;
}
You can do this with an octagon shape, as shown in this link.
The relevant code:
#octagon { width: 100px; height: 100px; background: red; position: relative; }
#octagon:before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; } #octagon:after { content: ""; position: absolute; bottom: 0; left: 0; border-top: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; }
You can edit the borders from the above code to get the exact shape you want.
I come with another pseudo options that allows to cut corners and allow to see main background behind: DEMO
Borders can be done too : DEMO with borders
The method is to draw background-color from box-shadow on rotated pseudo-elements wich basic border triangle cannot achieve. Pseudo element can take almost any shapes from radius and transform ... if that gives some ideas :)
I would like to create this using only CSS. Is this possible? If so, can you guys help me out?
Fairly easy with borders and a pseudo element:
ALL
#button::after {
content: "";
border: 64px solid transparent;
border-top: 12px solid orange;
position: absolute;
top: 29px;
left: 0;
}
DEMO
Try to experiment with this basic button:
.btn {
width: 100px;
height: 30px;
text-align: center;
border: 0;
}
.btn-arrow {
position: relative;
background: coral;
}
.btn-arrow:after {
border: solid transparent;
content:"";
position: absolute;
border-top-color: coral;
border-width: 16px 50px;
left: 0px;
top: 100%;
margin-top: 0px;
}
http://jsfiddle.net/dfsq/tNjCb/1/
how about something like the following:
http://jsfiddle.net/WDCu3/
<div id="test">Testing</div>
<div id="arrow"></div>
#test {background-color:red; width:100px;}
div {text-align:center;}
#arrow {
border-top: 15px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width:0;
}