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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With