SVGのpolygonとrectを生成し、CSSのtransformで多角柱化するデモ
このデモはChrome46で動作確認をしています（IEでは動作しせん）
Circle上に多角形Polygonを描画すると同等の手法でフタになるポリゴンを生成し、この円をrectの位置合わせに利用しています。
1つのコードで1ページ中に複数の多角柱を表示させることができます。
指定例：
drawPrism("box_1",3,20,"red","pink","blue",2);
drawPrism("box_3",50,160,"none","rgba(0,0,0,0.5)");
- 描画対象（"divのID名"）
- 角数（number）
- 高さ（number）もしくは（"eq"）
- polygonの色（"色名","#000","rgb(0,0,0)","rgba(0,0,0,0)","none"）
- 側面rectの色（同上）
- 枠線strokeの色（同上）
- 枠線の太さ（number）
高さを"eq"とすると側面rectの縦横を同じ長さにすることができます。4角形に適用すると正六面体になります。
色を"none"とすると塗りがなくなります。
透過させるにはrgba()でアルファを指定するか、CSSでpolygonやrectにopacity値を設定します。
角数を十分に大きくすると円筒のようになりますが描画がとても重たくなります。少ないとrectのつなぎ目がきになります。