create cylinder shape in pure css 3d

css, css-shapes, html, html5-canvas

Solution

There might be a couple of different aproaches on your problem. The first (and simplest) one would be to have multiple stacked circles that would give you the impression of a cylinder. But who wants hundreds of `div`s in a page just to render a simple graphic module? You can use multiple `box-shadow` values on a single element to simulate multiple circles that eventually simulates the cylinder:

div {
    box-shadow: black 0px 0px 1px,
        black 1px 1px 1px,
        black 2px 2px 1px,
        ...
        black 99px 99px 1px,
        black 100px 100px 1px;
}

Here's a fiddle with this example: http://jsfiddle.net/gion_13/nDCme/.

Problem

I was working on canvas 3D shapes I am very new to this. I am trying to create Pure css3d cylinder without any plugin. Here is what I am trying and with the output code, I am getting a circle. CSS Code: ``` div { height:200px; width:200px; border:solid 5px black; background:#159; border-radius:100%; display:inline-block; margin:1em; position:relative; text-align:center; line-height:200px; color:white; font-size:2em; transform:rotate(45deg); box-shadow:0 0 5px black, inset 0 0 5px #48a; } ``` HTML code ``` <div>&nbsp;</div> ``` Can some one help me.

Original source