CSS3 creating rounded triangle sided element

Question

I know only rounded border way. Can't figure out how to create such kind of imageless ul li tabs. As you see it's not exactly triangle: it's top and bottom sides kinda rounded. Is it possible to create something maximum similiar to the image below with css3? if yes, how?

Thank you in advance!

enter image description here

Gildas.Tambo · Accepted Answer · 2013-09-16 08:39:11Z

8

the markup :

first you have to define your makeup as follow:

<menu type=list>
    <li>home</li> 
    <li>work</li>  
</menu>

then use skew, rotate, box-shadow, border-radius and CSS Pseudo-elements as follow:

source: http://www.w3schools.com/css3/css3_2dtransforms.asp http://www.w3schools.com/cssref/css3_pr_box-shadow.asp http://www.w3schools.com/cssref/css3_pr_border-radius.asp http://www.w3schools.com/css/css_pseudo_elements.asp

Demo1:http://jsfiddle.net/kougiland/mVu2z/5/ enter image description here

menu{
   position:relative;
   width:320px;
   height:40px;
}

li{
    float:left;
    width:50%;
    background-color:red;
    list-style:none;
    position:relative;
    height:54px;
    text-align:center;
    line-height:50px;
    color:white;
}

li:before,li:after{
    position: absolute;
    content: "";
    height: 32px;
    width: 32px;
    border-radius: 4px;
    background-color: red;
    top: 11px;
    -webkit-transform: rotate(45deg) skew(16deg,16deg);
    -moz-transform: rotate(45deg) skew(16deg,16deg);
    transform: rotate(45deg) skew(16deg,16deg);
}
li:before{
    left:-15px;
}
li:after{
    right:-15px;
}
li:nth-child(2):before{
    box-shadow: 0px 0 0 black,-4px 4px 0 black;
}

Demo2: http://jsfiddle.net/kougiland/mVu2z/4/ enter image description here

the style:

menu{
   position:relative;
   width:320px;
   height:40px;
}

li{
    float:left;
    width:50%;
    background-color:red;
    list-style:none;
    position:relative;
    height:54px;
    text-align:center;
    line-height:50px;
    color:white;
}

li:before,li:after{
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    border-radius: 4px;
    background-color: red;
    top: 14px;
    -webkit-transform: rotate(45deg) skew(30deg,30deg);
    -moz-transform: rotate(45deg) skew(30deg,30deg);
    transform: rotate(45deg) skew(30deg,30deg);
}
li:before{
    left:-13px;
}
li:after{
    right:-13px;
}
li:nth-child(2):before{
    box-shadow: 0px 0 0 black,-4px 4px 0 black;
}

Demo3: http://jsfiddle.net/kougiland/mVu2z/ enter image description here

menu{
   position:relative;
   width:320px;
   height:40px;
}

li{
    float:left;
    width:50%;
    background-color:red;
    list-style:none;
    position:relative;
    height:54px;
    text-align:center;
    line-height:50px;
    color:white;
}

li:before,li:after{
    position:absolute;
    content:"";
    height:40px;
    width:40px;
    border-radius:4px;
    background-color:red;
    top: 7px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg);
}
li:before{
    left:-20px;
}
li:after{
    right:-20px;
}
li:nth-child(2):before{
    box-shadow: 0px 0 0 black,-4px 4px 0 black;
}

edited Sep 16, 2013 at 8:39

answered Sep 14, 2013 at 8:46

Gildas.Tambo

22.7k7 gold badges53 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sumurai8 Over a year ago

Use -ms-transform and -o-transform too

Mr. Alien Over a year ago

This is superb... +1 but we have same solutions :)

Gildas.Tambo Over a year ago

opera is now webkit so we dont need it anymore only if you want it to work on old opera my.opera.com/ODIN/blog/300-million-users-and-move-to-webkit

heron Over a year ago

But it's corner is too sharp. How to modify this to look like @Mr.Alien's example?

heron Over a year ago

And look at the picture example: your example's arrow length is longer then on picture. How about this?

|

Mr. Alien · Accepted Answer · 2013-09-14 08:18:37Z

2

You can use CSS transform rotate property along with border-radius, here, I've rotated an :after pseudo, which is positioned absolute to the container element. And than am using border-radius for the curve.

Demo

div {
    height: 30px;
    width: 100px;
    background: #f00;
    position: relative;
    margin: 100px;
}

div:after {
    background-color: #f00;
    content: "";
    display: block;
    height: 22px;
    width: 22px;
    transform: rotate(45deg);
    border-radius: 0 10px 0 0;
    right: -11px;
    top: 4px;
    position: absolute;
}

answered Sep 14, 2013 at 8:18

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

Comments

Ramin Firooz · Accepted Answer · 2013-09-14 08:11:30Z

0

Sure! Chris Coyier was wrote a cool code for this:

http://css-tricks.com/triangle-breadcrumbs

answered Sep 14, 2013 at 8:11

Ramin Firooz

5068 silver badges25 bronze badges

2 Comments

heron Over a year ago

Look at my picture, it's not exactly triangle. Re-read my question.

heron Over a year ago

@BrijeshGajjar facepalm :(

Collectives™ on Stack Overflow

CSS3 creating rounded triangle sided element

3 Answers 3

7 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related