その1

右矢印

HTML

<div class="circle-arrow"></div>

CSS

上、右ボーダーに線を引いたボックス要素を時計回りに45度回転させるイメージです。

.circle-arrow {
  width: 20px;
  height: 20px;
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
  transform: rotate(45deg);
}

結果

左矢印

HTML

HTMLは変わらないので割愛します。

CSS

左、下ボーダーに線を引いたボックス要素を時計回りに45度回転させるイメージです。

.circle-arrow {
  width: 20px;
  height: 20px;
  border-left: 1px solid #000000;
  border-bottom: 1px solid #000000;
  transform: rotate(45deg);
}

結果

その2

右矢印

HTML

<div class="arrow"></div>

CSS

横線を2本引き、1本目は時計回りに45度、2本目は半時計回りに45度回転させるイメージです。横線の回転の起点を右端にしています。

.arrow {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 60px;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% - 2px);
  width: 45px;
  height: 4px;
  background-color: #000000;
  transform-origin: calc(100% - 2px) 50%;
}

.arrow::before {
  transform: rotate(45deg);
}

.arrow::after {
  transform: rotate(-45deg);
}

transform-originについては以下を参考にして下さい。

参考

【CSS】transform-origin

結果

左矢印

HTML

HTMLは変わらないので割愛します。

CSS

横線を2本引き、1本目は時計回りに45度、2本目は半時計回りに45度回転させるイメージです。横線の回転の起点を左端にしています。

.arrow {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 60px;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% - 2px);
  width: 45px;
  height: 4px;
  background-color: #000000;
  transform-origin: 2px 50%;
}

.arrow::before {
  transform: rotate(45deg);
}

.arrow::after {
  transform: rotate(-45deg);
}

結果

最後に

特にありません。