css三角形符号怎么打

CSS三角形符号是一种常见的UI设计元素，可以用来装饰页面中的各个组件。下面介绍三种常见的实现方式。

/* 实现方式一：border实现 */
.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 50px solid #f00;
  border-bottom: 50px solid transparent;
}

/* 实现方式二：伪元素before实现 */
.triangle::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 50px solid #f00;
  border-bottom: 50px solid transparent;
  position: absolute;
  left: -50px;
}

/* 实现方式三：伪元素after实现 */
.triangle::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 50px solid #f00;
  border-bottom: 50px solid transparent;
  position: absolute;
  right: -50px;
} 

以上三种实现方式可以根据实际需求进行选择。其中，第一种方式是利用border的斜线效应实现的，优点是代码简单；第二种、第三种方式是通过伪元素实现的，优点是可以在额外的伪元素上进行样式调整。