はじめに

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

解決方法

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

transform-origin: 50% 66.6%;

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

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

codepenのソースはこちら