その1

下矢印

HTML

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

CSS

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

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

transform: rotate については以下を参考にして下さい。

参考

【CSS】transform rotate

結果

上矢印

HTML

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

CSS

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

.circle-arrow {
  width: 20px;
  height: 20px;
  border-top: 1px solid #000000;
  border-right: 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: 35%;
  left: calc(50% - 2px);
  width: 4px;
  height: 45px;
  background-color: #000000;
  transform-origin: 50% calc(100% - 2px);
}

.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: 35%;
  left: calc(50% - 2px);
  width: 4px;
  height: 45px;
  background-color: #000000;
  transform-origin: 50% 2px;
}

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

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

結果

最後に

特にありません。