CSS3 creating rounded triangle sided element - html

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!

Answer 1

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

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

Answer 3

Sure!
Chris Coyier was wrote a cool code for this:
http://css-tricks.com/triangle-breadcrumbs