网站开发 方案 报价单东莞网站推广营销网站设计
原理：其实就是规定元素的四个边框颜色及边框宽度，将元素宽高设置为0。如果要哪个方向的三角形，将对应其他三个方向的边框宽和颜色设置为0和透明transparent即可
1.元素设置边框，宽高，背景色
<style>.border {width: 50px;height: 50px;border: 2px solid;border-color: #96ceb4 #ffeead #d9534f #ffad60;} </style><body><div class="border"></div>
</body>
元素 边框为2px的，四个方向颜色不同
2.将元素宽高设置为0，边框宽设置为50px
.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;}
只要修改对应两边边框和该方向上以外的透明度即可