ヒーローイメージが画面いっぱいに表示されるデザインだ。
ん？ スクロールを促す下向きのアローがある。
SVGでもいいけれど、cssでどうにかしようか。
あれ？ よく見たら角度が90度じゃないぞ。
あれ！？ さらによく見たらボーダーの角が丸いぞ！？
むー、SVGかー。cssで行きたかったなー。
と、デザインを見て思うことがある。（ないかもしれない）
これがもし90度の普通のアローであればなんてことはない。
- 正方形を作って
- 2辺に
boredeを指定して - 回転させる
これだけでできる。90度のチェックマークしたければ、正方形ではなくて長方形を作ればいい。
- 角度が90度じゃない
- なんかちょっと角丸
- SVG使いたくない（なぜ？）
というときのためのcss。
サンプル
See the Pen css arrow by masayuki abe (@masayuki-abe) on CodePen.
-
.sampleはただのレイアウトのための要素 - アローは左と右を疑似要素の
beforeとafterで表現する - なんとなくわかりやすいように
pにborderつけた
たとえばW60*H20のアローだったら
疑似要素のサイズはどうすればいいだろうか？
ここで、W60の半分なのだからwidth:30px;では？ とやると失敗する。
（そう思う人がどれくらいいるかはわからない。自分だけかもしれない）
考え方としては、W60/2*H20の四角形の対角線、となる。
四角形（ここでは長方形）の対角線の求め方は、
√(a^2 + b^2)3秒で計算！？長方形の対角線の求め方がわかる公式
https://media.qikeru.me/rectangle-diagonal/
今回の場合だと、√30*30+20*20≒36なので、width:36px;となる。
heightは線の太さにするので任意。わかりやすく少し太く。
ポイントは
- 親要素に
position:relative;を指定して、疑似要素はabsolute - 今回は下向きのアローなので、
bottom:-4px; -
beforeとafterはleft:50%;で位置を微調整する - 今回は120度の角度で作りたいので、
(180-120)/2の値をtransform:rotate(XXdeg);で指定する（beforeは180degから解を引く）
この計算ができれば、ほしい角度のアローができる。