SCSS(CSS)で矢印を作る方法

SCSS(CSS)で矢印を作る方法です｡完成は以下のような感じです｡

HTML

<p class="arrow"></p>

何てことはない､HTMLです｡arrowというクラス名を付けています｡CSSのルールの範囲内で､クラス名を考えましょう｡

SCSS

.arrow {
  width: 50px;
  background: #000;
  height: 5px;
  border: 2px solid #000;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    width: 20px;
    right: -4px;
    bottom: 5px;
    transform: rotate(45deg);
    border: 2px solid #000;
    background: #000;
  }

  &::after {
    content: "";
    position: absolute;
    width: 20px;
    right: -4px;
    top: 5px;
    transform: rotate(-45deg);
    border: 2px solid #000;
    background: #000;
  }
}

arrowにposition: relative;を書きます｡起点になります｡あとは､beforeとafterにCSSを効かせます｡

transform: rotate(45deg);で､角度を付けます｡position: absolute;と書き､topやbottom､そしてrightで位置を調整します｡

CSS

.arrow {
  width: 50px;
  background: #000;
  height: 5px;
  border: 2px solid #000;
  position: relative;
}
.arrow::before {
  content: "";
  position: absolute;
  width: 20px;
  right: -4px;
  bottom: 5px;
  transform: rotate(45deg);
  border: 2px solid #000;
  background: #000;
}
.arrow::after {
  content: "";
  position: absolute;
  width: 20px;
  right: -4px;
  top: 5px;
  transform: rotate(-45deg);
  border: 2px solid #000;
  background: #000;
}

文字を横に置く

文字を横に置いてみます｡

HTML

<div class="arrow-box">
文字を横に置く
<div class="arrow"></div>
</div>

全体を囲んでいます(arrow-box)｡あとは､テキストを書きました｡pは書いておりません｡通常は書くでしょう｡

SCSS

.arrow-box{
width: 300px;
display: flex;
align-items: center;
}

矢印に関しては､何も変更はありません｡.arrow-boxにflexで横並びにします｡

CSS

.arrow-box {
  width: 300px;
  display: flex;
  align-items: center;
}

くの字にする

くの字にしたいと思います｡先ほどより､少し､簡単です｡

HTML

<p class="ku-box"></p>

簡単なHTMLです｡

SCSS

.ku-box{
width: 30px;
position: relative;
&::before{
content: "";
position: absolute;
right: 0;
width: 30px;
border: 3px solid #000;
background: #000;
transform: rotate(-45deg);
}

&::after{
content: "";
position: absolute;
right: 0;
bottom: 10px;
width: 30px;
border: 3px solid #000;
background: #000;
transform: rotate(45deg);
}
}

1番上の矢印のSCSSとさほど変わりません｡

CSS

.ku-box {
  width: 30px;
  position: relative;
}
.ku-box::before {
  content: "";
  position: absolute;
  right: 0;
  width: 30px;
  border: 3px solid #000;
  background: #000;
  transform: rotate(-45deg);
}
.ku-box::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 10px;
  width: 30px;
  border: 3px solid #000;
  background: #000;
  transform: rotate(45deg);
}

さいごに

矢印の傾きは簡単ですが､位置の調整が難しい｡ネットで調べてみましたが､有力な情報はありませんでした｡

これが限界か｡

矢印は印象的になります｡少しめんどくさい部分もありますが､気になる方はお試しあれ｡バックアップを取ってから､対応しましょう｡