CSS3创建形状，而不是使用图像

Question

是疗法的方式来创建这样

一个菜单项，而无需使用的图片？ iv'e试图与之前和之后的属性玩，但似乎并没有工作，因为我真的不知道如何创建角度

Answer 1

在CSS

body{ 
    background : #efefef; 
    font : .8em sans-serif; 
    margin: 0; 
} 

.tab-container{ 
    background : #2BA6CB; 
    margin: 0; 
    padding: 0; 
    max-height: 35px; 
} 

ul.tabs{ 
    margin: 0; 
    list-style-type : none; 
    line-height : 35px; 
    max-height: 35px; 
    overflow: hidden; 
    display: inline-block; 
    padding-right: 20px 
} 

ul.tabs > li.active{ 
    z-index: 2; 
    background: #efefef; 
} 

ul.tabs > li.active:before{ 
    border-color : transparent #efefef transparent transparent; 
} 


ul.tabs > li.active:after{ 
    border-color : transparent transparent transparent #efefef; 
} 

ul.tabs > li{ 
    float : right; 
    margin : 5px -10px 0; 
    border-top-right-radius: 25px 170px; 
    border-top-left-radius: 20px 90px; 
    padding : 0 30px 0 25px; 
    height: 170px; 
    background: #ddd; 
    position : relative; 
    box-shadow: 0 10px 20px rgba(0,0,0,.5); 
    max-width : 200px; 
} 

ul.tabs > li > a{ 
    display: inline-block; 
    max-width:100%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    text-decoration: none; 
    color: #222; 
} 

ul.tabs > li:before, ul.tabs > li:after{ 
    content : ''; 
    background : transparent; 
    height: 20px; 
    width: 20px; 
    border-radius: 100%; 
    border-width: 10px; 
    top: 0px; 
    border-style : solid; 
    position : absolute; 
} 

ul.tabs > li:before{ 
    border-color : transparent #ddd transparent transparent; 
    -webkit-transform : rotate(48deg); 
    left: -23px; 
} 

ul.tabs > li:after{ 
    border-color : transparent transparent transparent #ddd; 
    -webkit-transform : rotate(-48deg); 
    right: -17px; 
} 

/* Clear Fix took for HTML 5 Boilerlate*/ 

.clearfix:before, .clearfix:after { content: ""; display: table; } 
.clearfix:after { clear: both; } 
.clearfix { zoom: 1; } 

做到这一点，添加这个网站：

<div class=tab-container> 
    <ul class="tabs clearfix" > 
    <li> 
     <a href=# >Users</a> 
    </li> 
    <li class=active > 
     <a href=# >Pending Lots</a> 
    </li> 
    <li> 
     <a href=# >Nearby Lots</a> 
    </li> 
    <li> 
     <a href=# >Recent Lots</a> 
    </li> 
    </ul> 
</div> 
<div class=outer-circle></div> 

这将导致：

来源：Is there a way to create a chrome-like tab using css?