css做三角号

CSS 是网页设计中非常重要的一部分，它能够为网页添加各种不同的效果和样式。这篇文章将会介绍如何使用 CSS 制作三角形图案。

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 50px solid #F00;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
}

要制作一个三角形，我们可以使用 border 属性来实现。假设我们要制作一个以红色为底的等边三角形，我们可以这样写：

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 50px solid #F00;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
}

上述代码中，我们使用了四条边框，其中三条边框的样式为“transparent”，是为了让三角形的另外两个角变成直角。而另一条边框的样式为红色，表示三角形的底边。

如果我们要制作一个向上的三角形，可以将上下的边框样式互换：

.triangle-up {
  width: 0;
  height: 0;
  border-top: 50px solid #F00;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
}

同样，我们可以制作一个向左的三角形和向右的三角形：

.triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 50px solid #F00;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
}

.triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 50px solid transparent;
  border-right: 50px solid #F00;
  border-bottom: 50px solid transparent;
}

以上就是制作三角形的方法，只需要使用不同的边框样式、大小以及颜色，就可以制作出各种不同的三角形图案。