How to make an up and down arrow

Question

How can draw an up-down arrow with pure CSS?

This is what I get using HTML :

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

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

But the line between the arrows is too short. Can I make it longer?

Ideally, this is what I am after:

Answer 1

Single element solution

You can achieve that with 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>

Multiple elements solution

To achieve the actual arrow shape, you will need multiple elements. Here the pseudo elements are used to create white triangles, that cut out the black arrow heads:

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

Or another variant with a continuous line:

.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

To make the up-down arrows with the line in between the same as your example, I would suggest using SVG. You can use it inline as shown in the following example :

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

The inline SVG arrows are made with a path element and using one quadratic curve (made with Q3.5 7 0 10 in the up arrow).
The line between the arrows is made with a border left on a container div it expands with the height of this container.
Both arrows are positioned absolutely.

Answer 3

Here is one more solution using arrow char code \027A4 for ::before and ::after content.

Size of these chars has bound to root font size rem and their modification rotate, top and left based on the content font-size.

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