CSS运用边框画一个三角形

css代码：

.div1 {
      width: 0;
      height: 0;
      /* 由于边框是均匀分布于一个盒子内的 */
      border: 100px solid transparent;
      border-bottom: 100px solid red;
    }

html：
<div class="div1"></div>

代码效果。背景色可根据需要去除

 

 

由于边框是均匀分布在一个矩形中的，当边框的宽度足够大时，且上下左右的边框宽度相同时，在矩形的div中，会均匀分布，呈现以下的这种四个三角分布的形状，我们只要保留一条边框，其余边框设置成透明即可获得一个三角形。