css - CSS如何在垂直线上绘制箭头

Question

如何仅使用纯 CSS 在 CSS 垂直线上添加箭头？

我的垂直线仅使用 CSS 边框右，然后我想在这条线上添加一个两行箭头，使其像一个箭头，像这样：

<div  class="ve-line"></div>

.ve-line{
border-right: 1px solid rgb(232, 232, 232);
}

标签： css

Answer 1

您可以通过使用边框来创建 CSS 三角形，而不是添加另一个更大的三角形来创建类似边框的样式并将其绝对定位right: -1px以将其放在线上。

.ve-line{
  border-right: 1px solid rgb(232, 232, 232);
  height: 500px;
  position: relative;
}

.triangle {
  position: absolute;
  right: -1px;
  top: 100px;
}

.triangle:before,
.triangle:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
}

.triangle:before {
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-right: 22px solid rgb(232, 232, 232);
}

.triangle:after {
  position: absolute;
  right: 0;
  top: 2px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid white;
}

<div  class="ve-line">
  <div class="triangle"></div>
</div>