ヒーローイメージが画面いっぱいに表示されるデザインだ。
ん？ スクロールを促す下向きのアローがある。
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から解を引く）
この計算ができれば、ほしい角度のアローができる。
↧