Flared tabs
Snippet
kitt decided around 14:32 on 27 July 2011 to publish this:
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; }
Source:
Add new comment