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?