Search code examples
csstabscss-shapes

CSS for inverted curved tabs

I've gotten stuck on how to code the css for these inverted curvy tabs that were supplied by a design agency.

enter image description here

see here: http://max-guedy.com/images/tab.png

Solution

  • I created a demo how I would do it:

    jsBin demo

    • We set the brown color to the whole ul element
    • a 25x52 sprite image .png of the curve : (will change bg-position on hover) http://img401.imageshack.us/img401/258/bg2d.png that we will set to the li element but with no bg color.
    • The most importsnt here is to setup a higher z-index to the li elements, decreasing it on hover
    • Take care to set to the a elements left padding and respective -left margin to allow the anchor to 'hide' below the previous element image.

    Done that you can have wide and wider links and your template will do the work!

    and this CSS:

      ul#nav{
    height:26px;
    background:#A15049;
    border-bottom:1px solid #fff;
  }
  ul#nav li{
    position:relative;
    background:transparent url(http://img401.imageshack.us/img401/258/bg2d.png) no-repeat right top;
    height:26px;
    display:inline;
    float:left;
    padding:0 25px 0 5px;
    z-index:1;
  }
  ul#nav li a{
    padding-left:24px;
    margin-left:-24px;
    height:26px;
    display:block;
    color:#fff;
  }
  
  ul#nav li:hover{
    z-index:0;
    background: url(http://img401.imageshack.us/img401/258/bg2d.png) no-repeat right -26px;
  }
  ul#nav li:hover a{
    background:#CE392C;
  }