👈🏻 Back to Home

Tab-like navigation

Pen URL: http://codepen.io/makzan/pen/mAavqG

See the Pen Basic Nav by Thomas Seng Hin Mak (@makzan) on CodePen.


In this pen, I created a tab-like navigation.

The core code is the top-left radius and top-right radius.

a {
    border-top-left-radius: 10px;
    border-top-right-radius: 40px;
}

The list-item has a negative right margin to make the tabs overlay to each other.

li {
  float: left;
  margin-right: -5px;
}