如何制作上下箭头

Question

如何使用纯CSS画一个上下箭头？

这是我使用HTML得到的结果：

.up-down-arrow {
    font-size: 50px;
    color: #666;
    padding: 0;
    margin: 0;
    display: inline-block;
}

<div class="up-down-arrow">&#8597;</div>

但箭头之间的线太短了，我能让它变长吗？

理想情况下，我需要的是：

- Run

Answer 1

单元素解决方案

您可以使用伪元素、CSS三角形和一些定位来实现：伪元素，CSS三角形和定位。

.arrow {
  width: 2px;
  height: 200px; /* <- adjust your height as you need it */
  background: black;
  margin: 10px;
  position: relative;
}

.arrow::before,
.arrow::after {
  content: '';
  position: absolute;
  left: -9px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.arrow::before {
  top: 0;
  border-bottom: 15px solid black;
}

.arrow::after {
  bottom: 0;
  border-top: 15px solid black;
}

<div class="arrow"></div>

多元素解决方案

要实现实际的箭头形状，您需要使用多个元素。在这里，伪元素用于创建白色三角形，以切出黑色箭头头部：

.arrow {
  width: 2px;
  height: 200px; /* <- adjust your height as you need it */
  background: black;
  margin: 10px;
  position: relative;
}

.up, .down, .arrow::before, .arrow::after {
  position: absolute;
  left: -9px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.up {
  top: 0;
  border-bottom: 15px solid black;
}

.down {
  bottom: 0;
  border-top: 15px solid black;
}

.arrow::before, .arrow::after {
  content: '';
  z-index: 2;
}
.arrow::before {
  top: 11px;
  border-bottom: 4px solid white;
}
.arrow::after {
  bottom: 11px;
  border-top: 4px solid white;
}

<div class="arrow">
  <div class="up"></div>
  <div class="line"></div>
  <div class="down"></div>
</div>

或者另一种连续线的变体：

.line {
  position: relative;
  margin: -15px 0 -15px 9px;
  width: 2px;
  height: 180px;
  background-color: black;
  z-index: 5;
}

.up,
.down {
  position: relative;
  z-index: 3;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.up {
  border-bottom: 15px solid black;
}

.down {
  border-top: 15px solid black;
}

.down::before, .up::after {
  position: absolute;
  left: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  content: '';
  z-index: 4;
}
.down::before {
  bottom: 11px;
  border-top: 4px solid white;
}
.up::after {
  top: 11px;
  border-bottom: 4px solid white;
}

<div class="arrow">
  <div class="up"></div>
  <div class="line"></div>
  <div class="down"></div>
</div>

- andreas

---

我可以让箭头像图片一样向内弯曲吗？ - Run

更新了我的答案。 - andreas

Answer 2

为了使上下箭头与线之间的样式与您的示例相同，我建议使用SVG。您可以像以下示例中所示一样将其内联使用：

.wrap{
position:relative;
  height:70vh;
  border-left:1px solid #000;
  margin:10vh 50px;
  padding:5vh 20px;
}
.arrow {
  position:absolute;
  left:-5px;
  width: 9px;
  height: auto;
}
.up{top:-9px;}
.down{bottom:-9px;}

<div class="wrap">
  <svg class="arrow up" viewbox="0 0 7 10">
    <path d="M3.5 0 L7 10 Q3.5 7 0 10z"/>
  </svg>
  <svg class="arrow down" viewbox="0 0 7 10">
    <path d="M3.5 10 L7 0 Q3.5 3 0 0z"/>
  </svg>
  Whatever content you need here
</div>

内联SVG箭头是使用路径元素制作的，并使用一个二次曲线（在向上箭头中使用Q3.5 7 0 10）。

箭头之间的线是通过容器

上的左边框制作的，它会随着该容器的高度而扩展。

两个箭头都采用绝对定位。

- web-tiki

---

谢谢！我该如何调整箭头的宽度？需要让它们更宽。 - Run

@teelou，你只需要改变.arrow元素的宽度。并调整left属性使它们居中。 - web-tiki

还有，我如何更改箭头的颜色？ - Run

@teelou 要更改箭头颜色，您可以使用 fill 属性，就像这样：https://jsfiddle.net/2w5v6zL3/ 除此之外，在内联 SVG 中没有什么特别的。 - web-tiki

Answer 3

这里有另一种使用箭头字符代码\027A4作为::before和::after内容的解决方案。

这些字符的大小已绑定到根字体大小rem，它们的修改rotate，top和left基于内容字体大小。

.arrow {
  position: relative;
  width: 3px;
  height: 150px;
  margin: 20px;
  background: tomato;
}

.arrow::before,
.arrow::after {
  content: '\027A4';
  position: absolute;
  font-size: 1.5rem;
  color: tomato;
}

.arrow::before {
  top: -.9em;
  left: -.5em;
  transform: rotate(-90deg);
}

.arrow::after {
  bottom: -.9em;
  left: -.32em;
  transform: rotate(90deg);
}

<div class="arrow"></div>

- Banzay

---

我认为Vivaldi浏览器没有适当的调整我的箭头。 - Banzay

Answer 4

为了简单明了，将mid类中的高度样式更改以增加行的长度！

.up {
    width: 0px;
    height: 0px;
    border-bottom: 10px solid black;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: none;
}
.mid {
  margin-left:7px;
    width: 2px;
    height: 180px;
    background-color:black;
}
.down{
    width: 0px;
    height: 0px;
    border-top: 10px solid black;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: none;
}

<div class='up'></div>
<div class='mid'></div>
<div class='down'></div>

希望能对您有所帮助！

- Keerthana Prabhakaran

---

谢谢。我能让箭头头部像图片一样弯曲吗？ - Run