css三角形背景

CSS三角形背景是一种常见的设计元素，它可以让网站更加生动、美观。下面我们来介绍一些实现方法。

/* 1. 用border实现三角形 */
.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid #f00;
  border-right: 50px solid transparent;
}

/* 2. 用伪元素实现三角形 */
.triangle::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 50px solid #0f0;
  border-right: 50px solid transparent;
  display: block;
}

/* 3. 用transform实现三角形 */
.triangle {
  width: 100px;
  height: 100px;
  background-color: #00f;
  transform: rotate(45deg);
}

/* 4. 用clip-path实现三角形 */
.triangle {
  width: 100px;
  height: 100px;
  background-color: #f0f;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

/* 5. 用SVG实现三角形 */
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path fill="#ff0" d="M 0,0 L 50,100 L 100,0 Z" />
</svg> 

以上是五种常见的实现方法，可以根据具体情况选择合适的方法来实现。