How to Create Curved & Overlapping Menu Tabs in CSS

How to create Curved & Overlapping Menu Tabs in CSS

Curved UL LI list tabs

Skew the :before and :after pseudo elements,
set pseudos to some - offset
add left-top border-radius to :before and right-top to :after
if needed (to remove the top hard edge) add top border radius to the A element
add z-index:1; to the :after
add z-index:1; to the .active's :before element.

nav li {  display: inline-block;  border-bottom: 1px solid #8BBF50;  margin-left: -20px;}
nav a {  text-decoration: none;  color: #fff;  background: #8BBF50;  position: relative;  display: inline-block;  margin: 0 22px;  padding: 8px 11px;  text-shadow: 0 1px 0 rgba(0, 2, 0, 0.4);  border-radius: 7px 7px 0 0; /* just to smooth the top edges */}
nav a:before,nav a:after {  content: " ";  position: absolute;  top: 0;  width: 23px;  height: 100%;  background-color: inherit;}
nav a:before {  border-radius: 12px 0 0 0;  transform: skew(-24deg);  left: -13px; /* play with this one to give the LI border ~2px extrusion */}
nav a:after {  border-radius: 0 12px 0 0;  transform: skew(24deg);  right: -13px; /* play with this one to give the LI border ~2px extrusion */  border-right: 1px solid #628E2F;  z-index: 1; /* overlap next element */}

/* LI ACTIVE  */
nav li.active {  border-bottom: 1px solid #fff;}
nav li.active a {  color: #8BBF50;  background: #fff;}
nav li.active a:before {  z-index: 1; /* overlap prev element */}
nav li.active a:after {  border-bottom: 1px solid #fff;}

<nav>  <ul>    <li><a>Home</a></li>    <li class="active"><a>About</a></li>    <li><a>Products</a></li>    <li><a>Map</a></li>    <li><a>Contact</a></li>  </ul></nav>

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.

screenshot

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>

CSS: selected tab and overlapping box-shadow

What about adding another element with white background to cover the shadow. Nasty but should work...
http://jsfiddle.net/ctHBe/3/

making a trapezoid tab shape

I have found the Trapezoid shape in the Source.
It is a perspective transformation, have a look at this fiddle.

div{    width: 50px;    height: 50px;    background: lightblue;    border-radius: 5px;    transform: perspective(5px) rotateX(2deg);    transform-origin: bottom;}

<body>    <div>    </div></body>

Add inner corner curved border to active menu

This is my solution so far. But I am hoping there is a better solution out there... I use the pseudo element of active a to create a white border to hide the sharp corner.

body {  background:#eee;width:90%;margin:20px auto}ul {  margin: 0;  padding: 0;}ul li {  display: inline-block;  list-style: none;  position: relative;  vertical-align:bottom;}ul li a {  padding: 10px 15px;  display: block;  line-height: 25px;  margin-bottom:-1px;}ul li.active a {  background:#fff;  border:1px solid #aaa;  border-bottom:0;  border-radius:5px 5px 0 0;}
ul li.active:before,ul li.active:after {  content:"";  position:absolute;  bottom:-1px;  width:10px;  height:10px;  border:solid #aaa;}ul li.active:before {  left:-10px;  border-radius:50% 0;  border-width:0 1px 1px 0;  box-shadow: 1px 1px white;}ul li.active:after {  right:-10px;  border-radius: 0 50%;  border-width:0 0 1px 1px;  box-shadow: -1px 1px white;}
.content {  border:1px solid #aaa;background:#fff;height:200px}

<ul>    <li><a href="#">tab 1</a></li>    <li class="active"><a href="#">tab2</a></li>    <li><a href="#">tab3</a></li>    <li><a href="#">tab4</a></li></ul>  <div class="content"></div>

Inverse curve on side of button

You can try the curves by using the border-radius, transform, and transform-origin properties like,

/** * Slanted tabs with CSS 3D transforms * See http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/ */
body { padding: 50px;background:#20273d }
nav { position: relative; z-index: 1; white-space: nowrap;}
nav a { position: relative; display: inline-block; padding: 1.5em 2em 1em 1em; color:#9a9a9a; text-decoration: none; margin: 0 -7px;}

nav a::before { content: ''; /* To generate the box */ position: absolute; top: 0; right: 0; bottom: .5em; left: 0; z-index: -1; border-radius: 10px 10px 0 0; background: #434f78; box-shadow: 0 2px hsla(0,0%,100%,.5) inset; transform: perspective(5px) rotateX(2deg); transform-origin: bottom left;}

nav a.selected { z-index: 2;  color:#FFF;}

<nav class="left"> <a href="#" class="selected">All Products</a> <a href="#">Hardware</a> <a href="#">Virtual</a></nav>

How to Create Curved & Overlapping Menu Tabs in CSS