html css3如何画梯形,css3如何实现图中的梯形。

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

.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来调整， 不知道这个符合题主的要求不？