用CSS3绘制三角形的简单方法

要用CSS3绘制三角形，有多种方法可供选择，以下是其中一种简单易懂的方法：

方法一：使用border绘制三角形

使用border属性设置三角形的样式，一共需要设置三个边框值分别对应三角形的三条边，并且其中两条边的颜色要与背景色相同，这样就会在三角形的两侧形成空隙，使三角形成为一个封闭的图形。

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

这个示例中，我们定义了一个类名为“triangle”的元素，它的宽度为0，高度为0，上边框为50px的红色实线，左右两侧边框为50px的透明边框，这样就形成了一个等边红色三角形。

方法二：使用伪元素绘制三角形

伪元素是一种像元素一样的对象，可以在元素的前后插入新的内容。我们可以利用CSS3中的伪元素:after和:before来绘制三角形，分别对应元素的前面和后面。

.triangle {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}

.triangle:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -25px;
  width: 0;
  height: 0;
  border-top: 25px solid #ff0000;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

这个示例中，我们定义了一个类名为“triangle”的元素，宽度为100px，高度为100px，背景色为红色。利用:after伪元素来绘制三角形，设置了以下属性：

• content: 设置伪元素的内容为空；
• display: 块级元素；
• position: 绝对定位，相对于父元素定位；
• bottom: 距离父元素的底部距离为0；
• left: 距离父元素的左侧距离为50%；
• margin-left: 伪元素自身宽度的一半，让三角形居中；
• width: 宽度为0；
• height: 高度为0；
• border-top: 上边框为25px的红实线；
• border-left: 左侧边框为25px的透明边框；
• border-right: 右侧边框为25px的透明边框。

完整细致的攻略就是这样，以上两种方法都很简单，但都可以用于绘制不同大小、不同颜色的三角形。