如何繪製所有邊框半徑的CSS petagon？

Question

我找到一個很酷的五角大樓css代碼，我可以製作border-radius : 10px;，但它只在五角形的「底部」處於活動狀態，即使在五角形頂部也應用邊界半徑？

檢查JSFFIDLE here

Answer 1

下面的解決方案是凌亂的，所以你可能會更好過使用圖像。在此基礎上：How to create a triangle in CSS3 using border-radius

#inner{ 
 
    transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    background-color:silver; 
 
    width:100px; 
 
    height:100px; 
 
    top: 20px; 
 
    left: -50px; 
 
    position:relative; 
 
    -moz-border-radius: 20px; 
 
    border-radius: 20px; 
 
} 
 

 
#outer { 
 
    position: absolute; 
 
    width: 70px; 
 
    height: 140px;  
 
    top:20px; 
 
    left:50px; 
 
    overflow: hidden; 
 
    transform: rotate(-90deg); 
 
    -ms-transform: rotate(-90deg); 
 
    -webkit-transform: rotate(-90deg); 
 
    -o-transform: rotate(-90deg); 
 
    -moz-transform: rotate(-90deg); 
 
} 
 

 
#lower { 
 
    top:99px; 
 
    left:15px; 
 
\t width: 124px; 
 
\t height: 75px; 
 
\t background: silver; 
 
\t position: relative; 
 
    border-radius: 20px; 
 
}

<div id="outer"><div id="inner">&nbsp;</div></div> 
 
<div id="lower"></div>

jsfiddle

Answer 2

.gon { 
    border-radius : 10px; 
}