How to create Curved & Overlapping Menu Tabs in CSS

Question

I want to make a menu, in which the ends of the menus overlap and they have curved borders and slightly slanting edges.

Without using a background image, is it possible to do such a menu with only CSS?

For better understanding, have attached the sample of menu below. Want to know how to make the parts marked in red using CSS alone.

Please help, thanks in advance.

Answer 1

• 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>

The above does not provide the concave curvature at the bottom of the tab, instead I used the LI element border-bottom 2px extrusion to give a slight feeling to the eye. Not perfect but still a nice solution.

live demo on jsBin

Answer 2

I think I've solved It.

DEMO

Here is What I've added to The Code given at: http://css-tricks.com/tabs-with-round-out-borders/

I've Just added, background-color property to pseudo element :before and :after of .active li's css.

As follows:

.tabs li { 
  /* Makes a horizontal row */
  float: left; 

  /* So the psueudo elements can be
     abs. positioned inside */
  position: relative; 
  /*Make Sure The Li's stays Inline */
   display:inline-block;
  /* Remove Ugly Chromes `.` */
   list-styling:none;
}
.tabs .active a { 
  /* Colors when tab is active */
  background: #aea; /* Added Green Color */ 
  color: black; 
}
.tabs li:last-child:after,   .tabs li:last-child a:after,
.tabs li:first-child:before, .tabs li:first-child a:before,
.tabs .active:after,   .tabs .active:before, 
.tabs .active a:after, .tabs .active a:before {
    content: "";
    background: #afa; 
  }
.tabs .active:before, .tabs .active:after {
  background: white; 
  background:#afa;  
  /* Squares below circles */
  z-index: 1;
}
.tabs .active a:after, .tabs .active a:before {
  background: #ddc385;
}

and here is another fiddle after adding some JQuery to make it live. Hope it helps :).