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