CSSで描いた正三角形を回転する

はじめに

CSSでborderを使って正三角形を書く方法は分かったのですが、これを回転rotateさせると、borderで描いたので中心がわからないのできれいに回りません。

解決方法

これを解決するには、中心点originを変更する方法

transform-origin: 50% 66.6%; 

と
正三角形を内接円とするboxを描く方法があると思います。

実行例

後者でやってみたのでcodepenを貼り付けます。

See the Pen reeact-equilateral-triangle-rotate by kalz2q (@kalz2q) on CodePen.

終わりに

codepenのソースはこちら