border 除了作为简单的绘制边框以外,还可以绘制三角形,梯形,星形等任意的多边形,以下为绘制的两个三角形和梯形
<div class="triangle1"></div>
<div class="triangle2"></div>
<div class="trapezoid"></div>
.triangle1 {
/*锐角三角形*/
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 100px solid #249ff1;
border-left: 30px solid transparent;
border-right: 100px solid transparent;
}
.triangle2 {
/*直角三角形*/
width: 0;
height: 0;
border-top: 80px solid transparent;
border-bottom: 80px solid #ff5b01;
border-left: 50px solid #ff5b01;
border-right: 50px solid transparent;
}
.trapezoid {
/*梯形*/
width: 0;
height: 0;
border-top: none;
border-right: 80px solid transparent;
border-bottom: 60px solid #13dbed;
border-left: 80px solid #13dbed;
}