How to make rounded tabs with css?
Here's a proof of concept example with pure CSS. It uses pseudo-elements and rotate. It's pretty close to your source image and could get closer with some work.
Demo: http://jsfiddle.net/csDP9/9/
HTML:
/* Reset ul styles */
body { font-family: sans-serif; }
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul {
padding-left: 20px;
z-index: 5;
}
ul li {
color: grey;
background: #fefefe;
padding: 14px 24px 10px;
margin: 0px -6px 0 10px;
position: relative;
float: left;
text-align: center;
z-index: 1;
}
ul li::before {
content: '';
display: block;
position: absolute;
top: 0; left: 0;
width: 70%;
height: 100%;
border-style: solid;
border-color: #eee;
border-width: 2px 0 2px 2px;
border-radius: 8px 0 0 0;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
background-color: inherit;
z-index: -1;
}
ul li::after {
content: '';
display: block;
position: absolute;
top: 0; right: 0;
width: 70%;
height: 100%;
border-style: solid;
border-color: #eee;
border-width: 2px 2px 2px 0;
border-radius: 0 8px 0 0;
-webkit-transform: skewX(20deg);
-moz-transform: skewX(20deg);
-o-transform: skewX(20deg);
transform: skewX(20deg);
background-color: inherit;
z-index: -1;
}
ul li.active {
color: orange;
z-index: 10;
}
ul li.active::before,
ul li.active::after {
background-color: #fff;
border-bottom-color: #fff;
}
ul li:not([class='active']):hover::before,
ul li:not([class='active']):hover::after {
background-color: #efefef;
}<ul>
<li>Sample 1</li>
<li class="active">Sample 2</li>
<li>Sample 3</li>
<li>Sample 4</li>
</ul>You could do this with CSS Matrix Transforms, but, frankly, I wouldn't bother. It's complicated and the cross-browser compatibility is spotty. Just use images.