[分享]css中定义三角形

CSS中，定义三角形可以用到伪元素::after或::before，这些元素是能够在指定的元素之前或之后插入新的元素。

/* 建立一个三角形 */
.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 50px solid #000;
} 

上述代码的意思是建立一个等腰直角三角形，其中，border-top和border-bottom用来定义三角形的高度，border-right则是定义三角形的宽度与颜色。

如果想要得到等腰三角形，只需要将其中一个border的宽度值改为0即可。

/* 建立一个等腰三角形 */
.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid #000;
  border-bottom: 50px solid transparent;
  border-right: 50px solid transparent;
} 

当然，我们也可以将三角形的形状进行调整，比如想要得到一个向上的三角形：

/* 建立一个向上的三角形 */
.triangle {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid #000;
} 

上述代码中，border-left和border-right都定义了一个长度为25px的透明边框，使三角形的左右两侧呈现出直线的形状。border-bottom则定义了三角形的高度，并且设定颜色为黑色。