谁能用css画出来这种啊？

Question

Answer 1

<div class="box"></div>

.box{
            width:210px;
            height: 50px;
            margin: 100px auto;
            background: linear-gradient(to bottom,#dcba51 0%,#dcba51 40%,#cf942c 40% ,#cf942c 100% );
            position: relative;
        }
        .box:after{
            content:"";
            position: absolute;
            top:25%;
            left:10px;
            width:15px;
            height:15px;
            border-radius: 50%;
            background: #dcba51;
            box-shadow: 25px 0 0 #dcba51,50px 0 0 #dcba51,75px 0 0 #dcba51,100px 0 0 #dcba51,125px 0 0 #dcba51,150px 0 0 #dcba51,175px 0 0 #dcba51;
        }

Answer 2

可以用样式控制，拆分为一个小块，每个小块都由外框的大矩形和内部的小矩形以及半圆组成

<div>
   /**褐色矩形**/
    <span>顶部浅褐色矩形</span>
    <span>半圆，做border-radius处理</span>
</div>

Answer 3

https://jsfiddle.net/3m8fhc01/
虽然是可以这样做,不过目前浏览器支持不佳

更新

我用的是radial-gradient,浏览器支持不算好,不过我看到答案里有用linear-gradient和box-shadow的,这两个的浏览器支持还算可以,不过凹进去的区域并不是透明的,就看有没有这个需要

Answer 4

.radialGradient {
    position: relative; 
    width: 300px; 
    height: 50px; 
    background: radial-gradient(4px circle, #dabd4e, #dabd4e 4px, transparent) 0 21px repeat-x, 
                linear-gradient(to bottom, #dabd4e 0px, #dabd4e) 0 0 no-repeat #ce9828; 
    background-size: 13px 8px, 100% 25px;
  }

Answer 5

这个主要就是用到css3中的背景渐变来做。

Answer 6

这样的用css做也能做，就是很麻烦而已，要是需要这样的图，还不如直接去找ui拿个图方便

Answer 7

切一块图片平铺作为背景来处理吧。