様々な正多角形をCSSで再現する
東京オリンピックのエンブレムが十二角形を基準としているという話を聞いて、CSSで十二角形を作るにはどうやるんだろと思ってやってみたらあっさりできてしまったので、いっそのこと色々な多角形をCSSで作ってみようということで作ってみました。
エンブレム自体も単純な部品の組み合わせでできているので簡単にできそうだけど、すでに作っている人がいるみたいだったのでやめた。
正多角形をCSSで作る
正確にはSCSSを使ってます。
See the Pen Polygons in CSS by Tatsuya Azegami (@42EG4M1) on CodePen.
SCSSの$sizeの値を変更すると、多角形自体の大きさを変えることができます。
ウインドウのサイズやブラウザ等の環境によって、または多角形自体の大きさによって、辺と辺の繋ぎ目が途切れたりする場合があります。たぶん各辺の長さに小数点が入ってくるためだと思うのですが、これはどうにもできない感じでした。Chromeだとより顕著に現れるようです。
七角形とかがないことに関しては後述します。
作り方とかポイント
作り方はとても簡単です。JadeとかSassとか使うとさらに簡単にできます。
- 基準となるボックス（親要素）を作る
- 作りたい多角形の辺の数ぶんだけ長方形（子要素）を作る
※多角形が偶数の場合は、長方形の上下を辺として使えるため半分の数で良い - 長方形（子要素）を
position:absoluteして、幅（tan(π/n)）と高さ（100%）を指定する - それぞれの長方形（子要素）に対して、中心を基準に
transformで回転させる borderやbackgroundを調整して出来上がり
ポイントは子要素の幅（ここは辺の長さになる）で、今回の場合（円に外接する多角形）、タンジェントを使って幅（辺の長さ）を出すことができます。公式（？）に当てはめればいいだけなのでとても簡単で、tan(π/n)の「n」に作りたい多角形の角数を入れて、googleで検索をかけると先生が答えを出してくれます。
この方法で多角形を作成する場合は、すべて円に外接する多角形となるようなので、tan(π/n) で出た数値がそのまま辺の長さとなるようです。ちなみに、円に内接する多角形の場合は、サインを使って、sin(π/n) とすればいいようですが、ちょっとよく分かりません。
長方形（子要素）の回転は、作りたい多角形の外角の値をrotateに入れればうまいこといきます。
奇数の多角形は厳しい
七角形とかがないのは、外角の値が小数点を含む無限小数となってしまうためで、割り切れない角度で回転させるとうまくいきそうもないなと思い（偏見）作りませんでした。多角形が奇数の場合は、そういうのが多かったです。
また、前述の通り、偶数の場合は長方形の上下を多角形の辺として利用できるけど、奇数の場合はそれができないので、辺の数だけ長方形を用意して上下どちらかのボーダーを消すことで多角形化してます。そのため、奇数多角形の場合は、塗りつぶすことができません。
この方法で多角形を作成する場合、奇数は辛いです。
おわり
GWでちょっと暇だったので作ってみましたが、使いどころが全く思いつかないんですよね。
上記の方法で多角形を作った場合、アニメーションさせるのはしんどそうなので、こういうのは素直にcanvasとかWebGLとかで描画してアニメーションさせてっていうのが一番いいなと思った次第です。勉強します。
もっと簡単にできる方法とかあるかもしれないし、何か間違ってたらご指摘いただけると助かります。
