如何绘制所有边框半径的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; 
}