如何制作上下箭头

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>

但是箭头之间的线太短了。我可以延长它吗？

理想情况下，这就是我所追求的：

Answer 1

单元素解

您可以通过 pseudo elements, CSS triangles and some positioning 实现：

.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>

Answer 2

为简单起见，更改mid中的高度样式class以增加行的长度！

.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>

希望对您有所帮助！

Answer 3

为了使 上下箭头 之间的线与您的示例相同，我建议使用 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 箭头由一个路径元素和一个 quadratic curve 构成（在向上箭头中由 Q3.5 7 0 10 构成）。
箭头之间的线是在容器上留下的边框 div 它会随着容器的高度而扩展。
两个箭头都是绝对定位的。

Answer 4

这是另一种使用箭头字符代码 7A4 来表示 ::before 和 ::after 内容的解决方案。

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

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

.arrow::before,
.arrow::after {
  content: '7A4';
  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>

如何制作上下箭头

How to make an up and down arrow

html

css

svg

css-shapes