How to create curves and overlapping menu tabs in CSS

Question

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

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

For a better understanding, attach the sample menu below. Want to know how to make parts marked in red using only CSS.

Please help, thanks in advance.

Answer 1

• Tilt pseudo-elements :before and :after ,
• set an alias for some offset -
• add left-top border-radius to :before and right-top to :after
• if necessary (to remove the top hard edge) add the top border radius to element A
• add z-index:1; in :after
• add z-index:1; in .active :before .

 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 concave curvature at the bottom of the tab; instead, I used the extrusion of the 2x lower edge of the LI element to give a slight feel to the eye. Not perfect, but still a good solution.

live demo on jsBin

Answer 2

I think I solved it.

Demo

Here is what I added to the code at: http://css-tricks.com/tabs-with-round-out-borders/

I just added the background-color property for the :before and :after .active from .active li css.

Properly:

 .tabs li { /* Makes a horizontal row */ float: left; /* So the psueudo elements can be abs. positioned inside */ position: relative; /*Make Sure The Li 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 this helps :).