CSS 技巧：巧用 CSS 实现空心三角指示箭头，点缀细节，提升设计感！

2024-02-02 19:04:29

在网页设计中，三角形是一种非常常见的元素，它可以作为指示箭头、装饰元素等。三角形可以是实心的，也可以是空心的。实心的三角形比较简单，只需要使用 CSS 的 border 属性即可实现。而空心三角形则需要使用 CSS 的 border 和 伪元素来实现。

如何使用 CSS 实现空心三角形指示箭头

步骤 1：创建父元素

首先，我们需要创建一个父元素来容纳三角形。这个父元素可以是任何元素，比如 <div>、<span> 或 <p>。给父元素添加一个类名，以便于我们使用 CSS 来样式化它。

<div class="triangle-container">
</div>

步骤 2：添加三角形边框

接下来，我们需要使用 CSS 来为父元素添加三角形边框。我们可以使用 border 属性来实现这一点。

.triangle-container {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid #f00;
}

width 和 height 属性将父元素的宽高都设置为 0，这样三角形就不会占用任何空间。
border-left 和 border-right 属性将父元素的左右边框设置为透明。
border-bottom 属性将父元素的下边框设置为红色。

步骤 3：添加三角形伪元素

最后，我们需要使用 CSS 的伪元素来创建三角形的空心部分。我们可以使用 ::before 和 ::after 伪元素来实现这一点。

.triangle-container::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-right: 20px solid #f00;
  border-bottom: 20px solid transparent;
}

.triangle-container::after {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-left: 20px solid #f00;
  border-bottom: 20px solid transparent;
}