如何制作一个向上和向下箭头

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

单元素解决方案

您可以使用伪元素,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>

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向上箭头制作).
箭头之间的线条是在容器上留下的边框,div它随着容器的高度而扩展.
两个箭头都绝对定位.

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>