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

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