css中的三角

CSS中的三角是比较常见的图形之一，可以用来装饰页面、指示方向等。三角可以通过CSS中的伪元素:before和:after来创建，也可以通过CSS中的border属性来实现。下面我们来看几种创建三角的方法：

/* 通过伪元素来创建三角 */
.triangle {
  position: relative;
  width: 0;
  height: 0;
}
.triangle:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #000 transparent;
  position: absolute;
  top: 0;
  left: 0;
}

/* 通过border属性来创建三角 */
.triangle2 {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #000 transparent;
} 

以上两种方法都是通过设置border-width为0的一边来实现三角的，另外三边通过设置宽度为10px的边框来实现。不同的是，第一种方法使用了伪元素，在元素的前面创建了一个三角，第二种方法直接将三角作为元素的边框。

在实际应用中，我们可以根据需要在不同的地方使用不同的方法来创建三角。同时也可以通过设置不同的border颜色和样式，来实现不同的效果。