Flared tabs

Snippet

Given this HTML:

<ul>
<li><a>123</a>
<li><a>234</a>
<li><a>123</a>
</ul>

... this CSS will give you flared tabs:

body {
    background:#EEE;
}
ul {
    text-align:center;
    background:#FFF;
    padding:10px 0 0;
}
li {
    background:#CCC;
    display:inline-block;
    vertical-align:bottom;
    position:relative;
    line-height:40px;
    border-radius:10px 10px 0 0;
    position:relative;
}
li a {
    line-height:40px;
    display:block;
    padding:0 30px;
}
li a:before,
li a:after,
li:before,
li:after {
    position:absolute;
    content:'';
    bottom:0;
}
li a:before,
li:before {
    background:#CCC;
    width:10px;
    height:10px;
}
 
li a:after,
li:after {
    background:#FFF;
    border-radius:20px;
    height:20px;
    width:20px;
}
li:before,
li:after {
    right:100%;
}
li a:before,
li a:after {
    left:100%;
}
li:nth-child(2) {
    background-color:#EEE;
    z-index:10;
}
li:nth-child(2) a:before,
li:nth-child(2):before {
    background:#EEE;
}
li:nth-child(2) a:after,
li:nth-child(2):after{
    background:#CCC;
}

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.