CSS for inverted curved tabs

Question

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

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

Answer 1

EDIT added example with hover state.

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;
  }

Answer 2

It is just about possible to achieve this kind of thing with CSS.

Very difficult, but possible.

By default, border-radius of course only gives you regular rounded corners.

You can stretch them to some interesting shapes by adjusting the radius values. This will get you some of the way to your goal.

But the real trick here, to get the round-out parts of the tabs, is to use the CSS :before and :after pseudo-selectors to create additional styling elements, to which you need to add further border-radius.

The technique is described here: http://css-tricks.com/better-tabs-with-round-out-borders/ ... albeit for a fairly simple vertical-shaped tab. But it does a good job of explaining how to achieve the turn-out effect, which will be critical to you if you want to do this in CSS.

Bear in mind also that none of this will work in old versions of IE. IE8 does support :before and :after, but not border-radius. And while hacks like CSS3Pie exist to fix that, I wouldn't recommend using them for this kind of thing. It is likely to break.

If all the above sounds quite tricky and not really worth it, I would tend to agree. I think you'll find that a few simple images will work much better for your tabs in this instance. You could also try SVG to draw them if you want to be clever, but this will also have issues with old versions of IE.

Hope that helps.

Answer 3

You're easier off using images.

But if you insist on using CSS, I'd say that you need to use a lot ofborder-radius

Answer 4

That's an interesting challenge.

My first idea was to apply a skew transform to the tabs, a border radius to the top right corner and take care of the rounded lower part using a pseudo-element.

Unfortunately, this looks ugly http://dabblet.com/gist/2759785

Still, it bugs me that there must be a better way to do it with pure CSS.

Answer 5

I would say it's possible, but the amount of time that it would take would not be worth it, especially because it won't work in IE < 9...

There is a good tutorial that I have used in the past at css-tricks

However, as others have pointed out, I would recommend using images.

Answer 6

It really doesn't take THAT much CSS to achieve this anymore. Granted you'll have to toy with the radius' to get the desired slant.

HTML

<div role="tablist">
    <a href="#" role="tab" aria-controls="active-tab1" aria-selected="true">active tab</a>
    <a href="#" role="tab" aria-controls="active-tab2">inactive tab</a>
    <a href="#" role="tab" aria-controls="active-tab3">inactive tab</a>
</div>

<div class="pane">
    <section id="active-tab1" role="tabpanel">
        <p>Show whatever</p>
        <p>You Want</p>
        <ul>
            <li>inside</li>
            <li>This</li>
            <li>Section</li>
        </ul>
    </section>
    <section id="active-tab2" role="tabpanel">
    </section>
    <section id="active-tab3" role="tabpanel">
    </section>
</div>

CSS

[role=tablist]{padding:15px 15px 0;margin-left:88px;}

[role=tab]{
    color:#222;
    display:inline-block;
    padding-left:15px;
    padding-right:15px;
    text-decoration:none;
    line-height:44px;
    position:relative;
    min-width:150px;
    text-align:center;
    border-radius:15px 15px 0 0}
[role=tab]:hover{background-color:#ecf0f1;color:#222;}
[role=tab][aria-selected=true]{
    background-color:#3498db;
    color:white; }
[role=tab]:before,
[role=tab]:after{
    content:'';
    border-bottom:10px solid #3498db;
    position:absolute;
    bottom:-10px;
    width:44px;
    height:22px;
    z-index:1; }
[role=tab][aria-selected=true]:before{
    left:-44px;
    border-right:10px solid #3498db;
    border-bottom-right-radius:25px;
}
[role=tab][aria-selected=true]:after {
    right:-44px;
    border-left:10px solid #3498db;
    border-bottom-left-radius:25px;
}

.pane{
    background-color:#3498db;
    padding:25px;
    margin-left:5px;
    margin-right:5px;
    color:white;
    border-radius:15px;
}

And odds are you can slim even that down, made it in about 10 minutes.

http://jsfiddle.net/darcher/819yz9Ly/