正三角形を回転する(その2)

はじめに

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の使い方の方が難しかったかもしれない。