css3如何实现图中的梯形。

Question

目前只晓得可以用border来画矩形，而图中的梯形左右两边貌似带有一些弧度，求教大神应当如何实现？

Answer 1

图好模糊，没看清楚，我大概写了一下

.t{
    width:100px;
    height:50px;
    margin: 50px;
    text-align:center;
    color:#fff;
    line-height:50px;
    background-color:red;
    position:relative;
}
.t:before{
    content:'';
    display:block;
    width:35px;
    height:50px;
    position:absolute;
    transform:skewX(-30deg);
    background:red;
    border-top-left-radius:8px;
    left:-20px;
    top:0;
}
.t:after{
    content:'';
    display:block;
    width:35px;
    height:50px;
    position:absolute;
    transform:skewX(30deg);
    background:red;
    border-top-right-radius:8px;
    top:0;
    right:-20px;
}

利用before和after来做两个斜边部分，利用skew来倾斜，利用定位来处理位置，
我看到图中主要是两边顶部有圆角，那么再利用border-radius来调整， 不知道这个符合题主的要求不？

Answer 2

border-radius 属性
CSS3 border-radius

Answer 3

border-radius: 3px 3px 3px 3px;

Answer 4

同上：

    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
    border-bottom-right-radius: 1px;
    border-bottom-left-radius: 1px;