盒子宽高设置为0,设置四边边框,隐藏三边为透明色,留下自己需要的一个边
梯形只设宽度或高度,其他同理
.box{
width: 200px;height: 200px;
border-top: 20px solid red;
border-right: 20px solid green;
border-bottom: 20px solid blue;
border-left: 20px solid yellow;
}
.box1{
width: 0px;height: 0px;
border-top: 20px solid red;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
}
<div class="box"></div>
<div class="box1"></div>