はじめに
CSSで正三角形を描くのにborderを使う技がありますが、CSSのコマンドにpolygonがある。
clip-path: polygon(0% 87%, 50% 0%, 100% 87%);
紙と鉛筆で中心を割り出したりしなければいけないけれど、ボーダーで描くより頭は楽かもしれない。
実行例
See the Pen rotate-triangle-drawn-by-polygon by kalz2q (@kalz2q) on CodePen.
説明
ちゃんと回転していることを確認するのに円を重ねたのですが、正三角形を描くことより図形を重ねるabsoluteの使い方の方が難しかったかもしれない。