Edited at

CSSで矢印を作るスニペット

More than 1 year has passed since last update.


塗り矢印(下向き)

イメージ

スクリーンショット 2018-08-15 23.23.09.png

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

.arrow {

position: relative;
}
.arrow::before {
content: "";
display: block;
position: absolute;
top: 0px;
left: 50%;
width: 0;
height: 0;
transform: translateX(-50%);
border: 12px solid transparent;
border-top: 12px solid #000;
border-bottom-width: 0;
}

右向きにする場合

  border-left: 12px solid #000;

border-right-width: 0;

と変更してください。


ライン矢印(下向き)

イメージ

スクリーンショット 2018-08-15 23.27.36.png

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

.arrow {

position: relative;
}
.arrow::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 50%;
width: 14px;
height: 14px;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: translateX(-50%) rotate(135deg);
}

右向きにする場合

 transform: translateX(-50%) rotate(45deg);

と変更してください。