Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make rounded tabs with css? [closed]

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

Tabs

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?

like image 689
Javier Villanueva Avatar asked Oct 14 '13 15:10

Javier Villanueva


3 Answers

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.

screenshot

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

HTML:

/* 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; 
}
<ul>
    <li>Sample 1</li>
    <li class="active">Sample 2</li>
    <li>Sample 3</li>
    <li>Sample 4</li>
</ul>
like image 56
mwcz Avatar answered Oct 12 '22 12:10

mwcz


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.

like image 43
user1618143 Avatar answered Oct 12 '22 13:10

user1618143


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.

like image 35
EdenSource Avatar answered Oct 12 '22 13:10

EdenSource