CSS3 形状比例

Question

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

Answer 1

如何使用具有 border-radius 属性的 CSS3 渐变？我是从头开始做的，你可以看看

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