その1

HTML

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

CSS

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

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

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

参考

【CSS】transform rotate

結果

その2

HTML

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

CSS

縦線を2本引き、1本目は時計回りに45度、2本目は半時計回りに45度回転させるイメージです。

.arrow {
  position: relative;
  display: inline-block;
  width: 62px;
  height: 33px;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  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);
}

縦線の弾き方は以下を参考にして下さい。

参考

縦線を引く

結果

最後に

特にありません。