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 keep a sticky menu contained inside a floating sidebar?

    How should i improve my jQuery click funciton?

    How would I get my horizontal navigation bar to span the full width?

    How can I have an image float next to a centered div?

    html web shows header only in mobile view

    How to calculate CSS letter-spacing v.s. “tracking” in typography?

    How to change the width of displayed text nested in a div?

    How to get CSS Variables working in Dart

    How to put background-color only a section of a select? CSS

    How to modify CSS or JS file from “materialize:materialize” package in Meteor

    How to include this basic html (CSS, JavaScript) template into a php file?

    How to make responsive video container div?

    How can I set the color of the border area around the page/post on my Wordpress Site

    How to write CSS code without using :not selector?

    How to change the CSS after image lazy loading (jQuery)? [closed]

    How can I get --webkit-tap-highlight-color to highlight an entire DIV?

    css3 : how to make div go up to bottom of page?

    How to make html list scrollable downwards on fullscreen page?

    How to change the body background for three different div-s

    How to stop a hovered list item's text from changing back to default when hovering over subnav

    WordPress admin stylesheet not showing images

    How to center absolutely positioned elements in css for a pdf

    Screen scraping pages that use CSS for layout and formatting…how to scrape the CSS applicable to the html?

    How can I make my form take only a limited space?

    How to use sprite image in css?

    how to align horizontally using CSS

    “Pull center” in Bootstrap: A -D- B -E- C columns collapsing to A-B-C // D-E, how to get B between D and E?

    How to make a span tag wider with an alphabet inside?

    Why the space after the table, and how to remove it?

    How to have a bold header text?