css的三角形怎么做

以下是使用CSS实现三角形的方法：
1. 使用边框实现三角形

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #f00; /* 可以改变颜色 */
}

2. 使用伪元素实现三角形

.triangle {
  position: relative;
  width: 0;
  height: 0;
}
.triangle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-width: 0 50px 100px 50px;
  border-style: solid;
  border-color: transparent transparent #f00 transparent; /* 可以改变颜色 */
}

3. 使用transform属性实现三角形

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #f00; /* 可以改变颜色 */
  transform: rotate(45deg); /* 可以改变角度 */
}

4. 使用clip-path属性实现三角形

.triangle {
  width: 0;
  height: 0;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #f00; /* 可以改变颜色 */
}