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; 
}