以下Qiitaに書いた記事そのままでcodepenの埋め込みが出来るかどうかの実験です。
=> 出来た。いいね!!!!
はじめに
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のソースはこちら
