Html+CSS绘制三角形图标

下面我会详细讲解如何使用HTML和CSS绘制三角形图标的完整攻略。

1. 使用CSS border属性

CSS的border属性可以用来绘制三角形。具体操作如下：

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

解释说明：

1. width: 0; height: 0; 设置元素的宽高，这是绘制三角形必须的步骤。
2. border: 20px solid transparent; 给元素添加边框，其中20px表示边框的宽度，transparent表示边框的颜色，这里我们将边框设置成透明色。
3. border-top-color: red; 设置上边框的颜色为红色，我们可以按照需求设置三角形的颜色。
4. border-bottom: none; border-right: none; border-left: none; 去除其他三个边框，只留下上边框。这样就绘制出了一个三角形图标。

使用这种方法可以绘制直角三角形、等腰三角形以及任意角度的三角形。

2. 使用CSS transform属性

CSS的transform属性可以用来旋转元素，结合伪元素(:before和:after)可以绘制出多种形状的图标。具体操作如下：

.triangle {
  width: 20px;
  height: 20px;
  position: relative;
}

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

解释说明：

1. .triangle元素的position属性设置成relative，为了伪元素的绝对定位提供参照物。
2. .triangle:before伪元素代表三角形的左下方部分。这里的content属性必须设置为空，否则在某些情况下，该元素是不会渲染的。
3. border-top: 10px solid red; border-right: 10px solid transparent; 给伪元素设置一个顶部为红色、右边透明的边框。这样就构成了一个等腰直角三角形。
4. transform: rotate(45deg); 使用旋转功能，将三角形旋转45度。这样就得到了一个正方形。

使用此方法可以实现创意的、多变形状的三角形图标。

示例

下面是一个使用第一种方法绘制等腰三角形图标的示例。

<span class="triangle"></span>

CSS如下：

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

通过这个方法，我们可以自定义等腰直角三角形图标的大小、颜色等。

下面是一个使用第二种方法绘制正方形图标的示例。

<span class="square"></span>

CSS如下：

.square {
  width: 20px;
  height: 20px;
  position: relative;
}

.square:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 10px solid red;
  border-right: 10px solid transparent;
  transform: rotate(45deg);
}

通过这个方法，我们可以绘制出各种形状的图标，例如五角星、六角星等。

以上就是使用HTML和CSS绘制三角形图标的完整攻略，希望能够对你有所帮助。