纯CSS绘制三角形（各种角度）

当我们需要在网页上绘制一个三角形时，最常见的做法可能是通过使用背景图片或者使用canvas实现。但实际上，我们也可以通过CSS代码轻松地绘制出三角形，最大的好处是避免了使用图片带来的额外的HTTP请求和页面大小增加，同时也更加灵活和可控。下面将详细介绍如何用CSS绘制三角形。

方法一：使用边框

CSS中，通过设置一个元素的边框，我们可以使得这个元素的边缘具有一定的厚度和形状。如果我们将部分边框去掉，就可以得到一个三角形，具体实现步骤如下：

HTML代码

<div class="triangle"></div>

CSS代码

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

上面的代码实现了一个红色等边三角形，其边长是50px。其中，我们设置了元素的width和height为0，是为了确保这个元素不会占用空间，而只会用于绘制三角形。实际上，三角形的大小是由我们设置的border-top和border-right两个属性决定的，其中，border-top确定了三角形的底边长，border-right和border-left则确定了三角形的高度。

使用这种方法，我们还可以轻松地绘制出具有不同角度的三角形，只需要调整每条边的长度和宽度即可。比如，下面代码可以实现一个45度的等腰三角形：

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

方法二：使用伪元素

CSS中的伪元素是用于向DOM中添加虚拟元素的一种方式，可以方便我们实现一些动态效果和视觉效果。通过在伪元素上设置边框或背景，我们同样可以绘制出各种形状的三角形。具体实现步骤如下：

HTML代码

<div class="triangle"></div>

CSS代码

.triangle {
  position: relative;
  width: 0;
  height: 0;
  overflow: hidden;
}

.triangle:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
}

.triangle:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-left: 50px solid transparent;
}

上面的代码实现了一个红色等边三角形，其边长是50px。其中，我们先定义了一个.triangle元素作为容器，并将其设置为position: relative和overflow: hidden，是为了确保伪元素不会溢出到容器外面。然后，我们通过在伪元素上设置各种边框，来绘制出两个三角形，一个是通过:before伪元素绘制的，一个是通过:after伪元素绘制的。

使用这种方法，我们同样能够轻松绘制出各种类型的三角形。例如，下面的代码可以绘制出一个60度等边三角形：

.triangle:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 25px solid transparent;
  transform: rotate(60deg);
}

.triangle:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-left: 25px solid transparent;
  transform: rotate(120deg);
}

以上就是使用CSS绘制三角形的两种基本方法，它们都具有简单、灵活和无需额外HTTP请求的优势。通过不同的CSS属性组合，我们能够实现各种形状和角度的三角形。