How to make rounded tabs with css? [closed]


Tags: css,css3,tabs,rounded-corners,css-shapes

Problem :

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?



Solution :

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:

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

    CSS Howto..

    How to toggle two buttons on mouse hover?

    how do I prevent max-height transition from scrolling the page to the top?

    How do I offset where my fixed nav bar takes me?

    How can I check if CSS calc() is available using JavaScript?

    How to change value stylesheet_url in wordpress?

    How to get html elements from different class xpath?

    JQM, CSS: How to change disabled fields css?

    How to control element position when changing window size for parallax purpose

    How to have a multiline CSS horizontal scroll?

    How do I add an underline to unvisited links only?

    How to have multiple borders on div using css

    How do I get pictures side by side (responsive)

    How to overide all css style classes in an input field without effecting other elements?

    How to use more times css transform property?

    How can I make this section of my webpage responsive? [closed]

    How to stretch parent div to fit children div?

    Show css3 animate for 2 times

    How to get CSS pseudo-elements to look the same cross browser?

    How to centre a table in html using css file? [duplicate]

    How to assign CSS properties to aside tag

    How do you change the modal link color in Foundation?

    html / css / pre / code: how to force carriage return

    How to make image control button for each image inside the div using css and js?

    how to make nav auto adjsust its menu items using css?

    How to apply text rotation in CSS?

    How to add dynamic CSS style sheet for single xhtml file

    How to make jQuery add css dynamaically on window resize

    How can I properly align two divs that fold atop each other when browser is shrinked?

    How to properly display content when I resize the window?

    How to remove a specific (bottom) border from p:row in p:panelGrid?