原理：其实就是规定元素的四个边框颜色及边框宽度，将元素宽高设置为0。如果要哪个方向的三角形，将对应其他三个方向的边框宽和颜色设置为0和透明transparent即可
<style>
.border {
width: 50px;
height: 50px;
border: 2px solid;
border-color: #96ceb4 #ffeead #d9534f #ffad60;
}
</style>
<body>
<div class="border"></div>
</body>
元素 边框为2px的，四个方向颜色不同
.border {
width:0;
height: 0;
//注意solid也要设置
border: 50px solid;
border-color: #96ceb4 #ffeead #d9534f #ffad60;
}
元素变为四个三角形组合
3. 设置上、左、右透明度为transparent且设置右和下的边框
.border {
width:0;
height: 0;
border-style: solid;
/* border-width: 0 50px 50px 0; */
border-width: 0 50px 50px;
/* border-color: transparent transparent #d9534f transparent; */
border-color: transparent transparent #d9534f;
position: relative;
}
只要修改对应两边边框和该方向上以外的透明度即可