CSS

【CSS】くの字矢印の作り方

デモから。

See the Pen
PozbeVW
by momoi (@momoi)
on CodePen.

span {
  display: block;
  width: 12px;
  height: 12px;
  border: 0px;
  border-top: solid 4px #000;
  border-right: solid 4px #000;
  transform: rotate(45deg); /* 右向きの場合 */
}

やっていることはこんな感じ。

  • width, heightに同じ大きさを指定して四角を作る
  • borderを0に設定し、枠をなくす
  • 上と右のみにborderを設定して三角を作る
  • transformで向きを傾ける

矢印の向きは、transform: rotate(45deg)の角度をいじったら変えられます。

下向きのくの字
transform: rotate(135deg);

左向きのくの字
transform: rotate(-135deg);

上向きのくの字
transform: rotate(-45deg);

-CSS
-

© 2022 KeiTips Powered by AFFINGER5