<div>これ、CSSだけでできてます</div>
<div class="icon-inner">
  <div class="arrow-down icon"></div>
</div>
<div class="icon-inner">
  <div class="arrow-up icon"></div>
</div>
<div class="icon-inner">
  <div class="arrow-right icon"></div>
</div>
<div class="icon-inner">
  <div class="arrow-left icon"></div>
</div>
.icon-inner{
  width:30px;
  height:30px;
  display:inline-block;
}
.arrow-down.icon {
  color: #000;
  position: absolute;
  margin-left: 10px;
  margin-top: 2px;
  width: 1px;
  height: 16px;
  background-color: currentColor;
}

.arrow-down.icon:before {
  content: '';
  position: absolute;
  left: -5px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-top: solid 1px currentColor;
  border-right: solid 1px currentColor;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}

.arrow-up.icon {
  color: #000;
  position: absolute;
  margin-left: 10px;
  margin-top: 3px;
  width: 1px;
  height: 16px;
  background-color: currentColor;
}

.arrow-up.icon:before {
  content: '';
  position: absolute;
  left: -5px;
  top: 1px;
  width: 10px;
  height: 10px;
  border-top: solid 1px currentColor;
  border-right: solid 1px currentColor;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}


.arrow-left.icon {
  color: #000;
  position: absolute;
  margin-left: 3px;
  margin-top: 10px;
  width: 16px;
  height: 1px;
  background-color: currentColor;
}

.arrow-left.icon:before {
  content: '';
  position: absolute;
  left: 1px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-top: solid 1px currentColor;
  border-right: solid 1px currentColor;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}




.arrow-right.icon {
  color: #000;
  position: absolute;
  margin-left: 2px;
  margin-top: 10px;
  width: 16px;
  height: 1px;
  background-color: currentColor;
}

.arrow-right.icon:before {
  content: '';
  position: absolute;
  right: 1px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-top: solid 1px currentColor;
  border-right: solid 1px currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.