完成形

シンプルな矢印です｡ところが､これを実数するには一手間､かかります｡

HTML

<div class="arrow">
<span>矢印</span>
</div>

HTMLは単純です｡arrowの中にspanが入っています｡その中に文字を書いています｡初心者でも分かるかと思います｡

ちなみに､クラス名はCSSのルールの範囲内で自由に決めることが出来ます｡ここでは､arrowという名前にしています｡

SCSS

.arrow {
width: 100px;
position: relative;

&::before{
content: "";
position: absolute;
rotate: (-45deg);
right: 0;
bottom: 0;
width: 20px;
border: 1px solid #000;
}
&::after{
content: "";
position: absolute;
rotate: (45deg);
right: 0;
bottom: 13px;
width: 20px;
border: 1px solid #000;
}

span{
&::after{
content: "";
position: absolute;
border: 1px solid #000;
right: 6px;
top: 55%;
width: 30px;
}
}
}

arrowにたいして､position: relative;を書いています｡これは矢印の起点を決めるものです｡これは必須です｡これが起点となります｡

beforeは矢印の上の部分､afterは矢印の下の部分です｡rotateで角度を付けています｡あとは､topやrightなどで位置を決めます｡

綺麗な矢印を作るため､数値は感覚で決めています｡

さいごにspanにたいして､横線を書きます｡これで完成です｡一手間かかりますが､これで矢印を作ることができます｡

お試しあれ｡

CSS

.arrow {
  width: 100px;
  position: relative;
}
.arrow::before {
  content: "";
  position: absolute;
  rotate: -45deg;
  right: 0;
  bottom: 0;
  width: 20px;
  border: 1px solid #000;
}
.arrow::after {
  content: "";
  position: absolute;
  rotate: 45deg;
  right: 0;
  bottom: 13px;
  width: 20px;
  border: 1px solid #000;
}
.arrow span::after {
  content: "";
  position: absolute;
  border: 1px solid #000;
  right: 6px;
  top: 55%;
  width: 30px;
}

さいごに

正解は1つじゃないので､ひとつの方法としてご理解ください｡

おしまい！