【CSS】くの字矢印をCSSで実装する

上矢印 <div class="arrow arrow-top"></div> <br>
下矢印 <div class="arrow arrow-bottom"></div> <br>
左矢印 <div class="arrow arrow-left"></div> <br>
右矢印 <div class="arrow arrow-right"></div> <br>

<style>
.arrow {
  position: relative;
  display: inline-block;
  padding: 10px;
}

.arrow::before {
  content: '';
  width: 10px;
  height: 10px;
  border-top: solid 2px #5070e3;
  border-right: solid 2px #5070e3;
  position: absolute;
  left: 10px;
  top: 8px;
}

.arrow.arrow-top::before {
  transform: rotate(-45deg);
  top: 10px;
}

.arrow.arrow-bottom::before {
  transform: rotate(135deg);
}

.arrow.arrow-left::before {
  transform: rotate(-135deg);
}

.arrow.arrow-right::before {
  transform: rotate(45deg);
}
</style>

上矢印 <div class="arrow-round arrow-top"></div> <br>
下矢印 <div class="arrow-round arrow-bottom"></div> <br>
左矢印 <div class="arrow-round arrow-left"></div> <br>
右矢印 <div class="arrow-round arrow-right"></div> <br>

<style>
.arrow-round {
  position: relative;
  display: inline-block;
  padding: 10px;
  border: 1px solid #5070e3;
  border-radius: 50%;
  top: 5px;
}

.arrow-round::before {
  content: '';
  width: 8px;
  height: 8px;
  border-top: solid 2px #5070e3;
  border-right: solid 2px #5070e3;
  position: absolute;
  left: 5px;
  top: 5px;
}

.arrow-round.arrow-top::before {
  transform: rotate(-45deg);
  top: 7px;
}

.arrow-round.arrow-bottom::before {
  transform: rotate(135deg);
  top: 4px;
}

.arrow-round.arrow-left::before {
  transform: rotate(-135deg);
  left: 7px;
}

.arrow-round.arrow-right::before {
  transform: rotate(45deg);
  left: 3px;
}
</style>