图好模糊，没看清楚，我大概写了一下
.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来调整， 不知道这个符合题主的要求不？