[分享]css写一个三角箭头

CSS3可以很方便地实现三角箭头，只需要一些简单的代码就可以实现各种不同方向和样式的箭头。

/* 向右的三角 */
.arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-left: 20px solid red;
  border-bottom: 10px solid transparent;
}

/* 向上的三角 */
.arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid red;
}

/* 向左的三角 */
.arrow-left {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 20px solid red;
  border-bottom: 10px solid transparent;
}

/* 向下的三角 */
.arrow-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid red;
} 

以上代码中，通过设置对应的边框颜色和宽度，来实现不同方向的箭头。

除此之外，还可以用::before或::after伪元素来实现不同形状、颜色和尺寸的三角箭头。

CSS3强大的样式效果，让我们可以快速灵活地操控网页元素的外观。学好CSS，可以让你的网页设计更加出色。