CSS3形状比例

Question

在CSS3中创建一个形状如下所示时，最好的方法是记住我希望尽可能保留大部分样式？

Answer 1

如何使用CSS3渐变与border-radius财产？我做了这个从零开始，你可以看看

Demo

div { 
     height: 200px; 
     width: 200px; 
     margin: 50px; 
     border: 3px solid #B6801F; 
     border-radius: 24px; 
     background: #f7d060; 
     background: -moz-linear-gradient(top, #f7d060 0%, #ed8328 100%); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7d060), color-stop(100%,#ed8328)); 
     background: -webkit-linear-gradient(top, #f7d060 0%,#ed8328 100%); 
     background: -o-linear-gradient(top, #f7d060 0%,#ed8328 100%); 
     background: -ms-linear-gradient(top, #f7d060 0%,#ed8328 100%); 
     background: linear-gradient(to bottom, #f7d060 0%,#ed8328 100%); 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7d060', endColorstr='#ed8328',GradientType=0); 
     box-shadow: 1px 2px 3px #313131; 
     position: relative; 
    } 

    div span { 
     position: absolute; 
     top: 10px; 
     width: 180px; 
     left: 10px; 
     height: 80px; 
     background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.2))); 
     background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); 
     background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); 
     background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); 
     background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3ffffff', endColorstr='#33ffffff',GradientType=0); 
     display: block; 
     border-radius: 18px; 
}