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 :
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/
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.
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.
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;
}
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 :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.