[分享]css写出三角形

在CSS中，我们可以使用一些技巧来实现在页面中画出各种形状，比如三角形。下面我们来介绍一些实现三角形的方法。/ 第一种方法：使用border / .triangle { width: 0; heigh...

在CSS中，我们可以使用一些技巧来实现在页面中画出各种形状，比如三角形。下面我们来介绍一些实现三角形的方法。

/* 第一种方法：使用border */
.triangle {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: red transparent transparent transparent;
}

/* 第二种方法：使用伪元素 */
.triangle::before {
  content: "";
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid red;
}

/* 第三种方法：使用transform */
.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-right: 20px solid red;
  transform: rotate(45deg);
} 

以上三种方法均能实现三角形的效果，具体选择哪种方法要根据情况而定，比如对于需要动态变化的三角形，使用transform方法会比较方便。