css三角图标制作

CSS三角图标制作是网页设计中常用的技巧之一。通过CSS的transform和伪元素选择器，我们可以轻松地实现各种风格的三角图标。下面，我们将介绍两种实现方式。

/* 方式一：border实现三角图标 */
.arrow-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

/* 方式二：transform实现三角图标 */
.arrow-down {
  width: 10px;
  height: 10px;
  background-color: black;
  transform: rotate(45deg);
}

.arrow-left {
  width: 10px;
  height: 10px;
  background-color: black;
  transform: rotate(135deg);
}

.arrow-right {
  width: 10px;
  height: 10px;
  background-color: black;
  transform: rotate(-45deg);
} 

以上代码中，方式一使用了border来制作三角图标，其中，宽度和高度都为0，而实际三角形的形状则通过border-left、border-right和border-bottom来确定。方式二则使用transform来实现三角图标，通过rotate函数设置旋转角度，从而实现不同方向的箭头。

以上两种方式都是常用的三角图标制作方式，具体选择哪种方式可以根据需要来决定。值得注意的是，在使用这些技巧时，也应注意浏览器的兼容性。