horizontale Tabs mit Rundung

Original: http://jsbin.com/super-css-super-challenge

by Jens Grochtdreis

HTML

<!-- Original: http://jsbin.com/super-css-super-challenge -->   
  <ul>
    <li id="one"><a href="#one">One</a></li> 
    <li id="two" class="active"><a href="#two">Two</a></li> 
    <li id="three"><a href="#three">Three</a></li> 
  </ul>
  
  <div id="content"></div>

CSS

* { margin: 0; padding: 0; }
    body { background: #938172; }
    ul { list-style: none; overflow: hidden; margin: 60px 0 0 0; padding: 0 0 0 100px; }
    li { float: left; position: relative; }
    a { 
      display: block; 
      padding: 10px 40px; 
      text-decoration: none; 
      color: black;
      background: #626266; 
      -webkit-border-top-left-radius: 15px;
      -webkit-border-top-right-radius: 15px;
      -moz-border-radius-topleft: 15px;
      -moz-border-radius-topright: 15px;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px; 
    }
    .active {
      z-index: 3;
    }
    .active a { 
      background: #CC9E61; 
      color: white; 
    }
    li:before, li:after, li a:before, li a:after {
      content: "";
      position: absolute;
      bottom: 0;
    }
    .active:before, .active:after {
      background: #CC9E61; 
      z-index: 1;
    }
    li:before, li:after {
      background: #626266;
      width: 10px;
      height: 10px;
    }
    li:before {
      left: -10px;      
    }
    li:after { 
      right: -10px;
    }
    li a:after, li a:before {
      width: 20px; 
      height: 20px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 20px;
      background: #938172;
      z-index: 2;
    }
    .active a:after, .active a:before {
      background: #626266;
    }
    li a:before {
      left: -20px;
    }
    li a:after {
      right: -20px;
    }
    #content { background: #CC9E61; min-height: 400px; }