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