How to make rounded tabs with css? [closed]

Question

I'm wondering if it's possible to archive the following effect with CSS

I found these articles that kind of help but the problem is that in my case the tab sides are diagonal not straight vertical lines:

http://css-tricks.com/tabs-with-round-out-borders/
http://css-tricks.com/better-tabs-with-round-out-borders/

Is it possible to do?

Answer 1

Here's a proof of concept example with pure CSS. It uses pseudo-elements and rotate. It's pretty close to your source image and could get closer with some work.

Demo: http://jsfiddle.net/csDP9/9/

HTML:

<ul>
    <li>Sample 1</li>
    <li class="active">Sample 2</li>
    <li>Sample 3</li>
    <li>Sample 4</li>
</ul>

CSS:

/* Reset ul styles */
body { font-family: sans-serif; }
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul {
    padding-left: 20px;
    z-index: 5;
}
ul li {
    color: grey;
    background: #fefefe;
    padding: 14px 24px 10px;
    margin: 0px -6px 0 10px;
    position: relative;
    float: left;
    text-align: center;
    z-index: 1;
}
ul li::before {
    content: '';
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 70%;
    height: 100%;
    border-style: solid;
    border-color: #eee;
    border-width: 2px 0 2px 2px;
    border-radius: 8px 0 0 0;
    -webkit-transform: skewX(-20deg);
       -moz-transform: skewX(-20deg);
         -o-transform: skewX(-20deg);
            transform: skewX(-20deg);
    background-color: inherit;
    z-index: -1;
}
ul li::after {
    content: '';
    display: block;
    position: absolute;
    top: 0; right: 0;
    width: 70%;
    height: 100%;
    border-style: solid;
    border-color: #eee;
    border-width: 2px 2px 2px 0;
    border-radius: 0 8px 0 0;
    -webkit-transform: skewX(20deg);
       -moz-transform: skewX(20deg);
         -o-transform: skewX(20deg);
            transform: skewX(20deg);
    background-color: inherit;
    z-index: -1;
}
ul li.active {
    color: orange;
    z-index: 10;
}
ul li.active::before,
ul li.active::after {
    background-color: #fff;
    border-bottom-color: #fff;
}
ul li:not([class='active']):hover::before,
ul li:not([class='active']):hover::after {
    background-color: #efefef; 
}

Answer 2

You could do this with CSS Matrix Transforms, but, frankly, I wouldn't bother. It's complicated and the cross-browser compatibility is spotty. Just use images.

Answer 3

I think with CSS, you could not get tabs like your exemple. Best solution is to use images or Matrix transform (as others have already answered).

Anyway, for simple tabs, you can have diagonales using :

.tabrow li:before {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 5px 26px 5px;
    border-color: transparent transparent #aaa transparent;
    position: absolute;
    content:" ";
    left:-5px;
    top:4px;
    z-index:-1;
}
.tabrow li:after {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 5px 26px 5px;
    border-color: transparent transparent #aaa transparent;
    position: absolute;
    content:" ";
    right:-5px;
    margin-top:4px;
    z-index:-1;
}

Exemple

Of course this is not exactly what you wanted but it can be something to start with.

Answer 4

CSS3 provides effects for rounded corners, but not diagonal ones. You'll probably just have to use images.