Circle上に多角形Polygonを描画すると同等の手法でフタになるポリゴンを生成し、この円を基準に側面rectの位置合わせに利用しています。
角数を指定するだけで3角柱～円柱（ただしとても処理が重たくなる）まで生成できます。
polygon、rectの色も指定できます。
このデモはChrome46で動作確認をしています（IEでは動作しません）
このコードで、1ページ中に複数の多角柱を表示させることができます。
描画先のdivにcssのtransformをかけることで角柱を回転さすことができます。。
（今回は立体とわかりやすいように斜め上からみているようにCSSでrotateしています）
↓以下が実際のソースサンプルです。
▼JavaScript
▼CSS
▼HTML
One thought on “JavaScriptでSVGのpolygonとrectを生成し、CSSのtransformで多角柱にする”