How to create Curved & Overlapping Menu Tabs in CSS


Tags: html,css,menu,border,css-shapes

Problem :

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.

enter image description here

Please help, thanks in advance.



Solution :

My 2¢

jsBin demo

enter image description here

TL;DR?

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

HTML:

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

CSS:

nav li{
  display:inline-block;
  border-bottom:1px solid #8BBF50;
  margin-left:-20px;
}
nav a{
  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;
}

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.

enter image description here


    CSS Howto..

    How can I apply a style to a div using CSS as long as that div does NOT contain an element with a certain id?

    How to select all cell starting, containing or ending with some word with JQuery/CSS?

    HTML or CSS, how is this done? [closed]

    How to set dynamic responsive divs with only CSS (no javascript)?

    How to add scroll to child of flex item?

    How to remove unwanted white space in CSS

    How to create a web page with 4 rectangurlar splits?

    How does free hosting website work? [closed]

    CSS hover transition - how to remove delay?

    How to target last TD cell?

    How do I style DIVs inside a checkbox label based on if it is checked or not?

    How to apply CSS page-break to print a table with lots of rows?

    JQuery: how to make this variable negative before declaring it as a CSS value?

    SCSS has the color in rgba() format, but the color is in hex format. How to keep the color in RGBA() format in the genrated css?

    How to force div width with CSS to stretch to its content but not to be restricted by its container?

    CSS :hover that shows more than one image

    How to override bootstrap styles?

    How to make round corners to both inside of a box and its border?

    How can i improve my javascript? codepen included

    How to make layout like notes in Google Keep using CSS?

    how to write a CSS rule that only applies if position:fixed is not supported or Jquery-test for position:fixed?

    How to center in
    without text-align?

    How to change horizontal block-level elements to vertical elements after specific width?

    How do device screen resolutions scale in CSS?

    How to write this css in shorter way? see example

    In emacs how do I add a second type of commenting to a css derived mode?

    How to increase the font size of one word only in the line?

    How to make Superfish menu vertical in first level but horizontal in second level?

    How do I resize an image size automatically loaded in different browsers and screen size?

    How to keep nav bar from shifting elements to next line when zooming in?