css实现梯形

clip-path

clip-path使用裁剪的方式创建元素的可见区域，区域内的可见，区域外的隐藏。

<div id="main"></div>

#main {
    width: 200px;
    height: 100px;
    background-color: red;
    clip-path: polygon(0 100%, 100% 100%, 80% 0, 20% 0)
}

border

<div id="main"></div>

#main {
    width: 200px;
    border-bottom: 200px solid red;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    border-top: 0px solid transparent;
}