css做引导箭头样式

作者：冷视天下发布日期:2025-07-14 浏览:55

/* 定义一个引导箭头的样式 */
.arrow {
  position: relative;
  width: 100px;
  height: 50px;
  background-color: #f0f0f0;
  margin: 50px auto;
}

.arrow::after {
  content: '';
  position: absolute;
  bottom: -10px; /* 箭头位置在元素底部 */
  left: 45%; /* 箭头水平居中 */
  border-width: 10px;
  border-style: solid;
  border-color: #f0f0f0 transparent transparent transparent; /* 设置箭头颜色和透明边框 */
}

解释说明：

.arrow 类定义了一个矩形块，用于作为引导箭头的主体部分。
::after 伪元素用于创建一个三角形箭头，通过设置 border 属性来实现。通过调整 border-width 和 border-color 来控制箭头的大小和颜色。
bottom: -10px 将箭头放置在矩形块的下方，left: 45% 使箭头大致水平居中。
border-color 中的第一个值是箭头的颜色（#f0f0f0），其余三个值为透明，从而形成一个向下的箭头。

这个代码片段展示了如何使用 CSS 创建一个简单的引导箭头效果。

上一篇：css垂直居中怎么设置

下一篇：style type=test/css