CSS3 画一个朝下的箭头：简单示例及代码详解

可以使用 CSS3 的伪元素来画一个朝下的箭头。下面是一个示例：

HTML 代码：

<div class='arrow-down'></div>

CSS 代码：

.arrow-down {
  position: relative;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid #000;
}

.arrow-down:before {
  content: '';
  position: absolute;
  top: 15px;
  left: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid #000;
}

解释：

• 通过设置border属性来定义箭头的形状，使用border-left和border-right来定义箭头的底部，使用border-top来定义箭头的尖端。
• 使用:before伪元素来创建箭头的底部，通过设置position: absolute和调整top和left属性来定位箭头的位置。

以上代码会创建一个黑色的朝下箭头。你可以根据需要调整箭头的颜色、尺寸和位置。