Funnel chart in css - html

Question

I am trying to customize a funnel chart on the basis of data that I have rendered through database on page.
All works well except css rendering for chart.
<ul id="funnel-cht">
<li style="height:70px;width:50%;background-color:yellow">pendora</li>
<li style="height:70px;width:40%;background-color:#98bf26">pending</li>
<li style="height:70px;width:30%;background-color:orange">pen</li>
<li style="height:70px;width:20%;background-color:#c10000">Test</li>
</ul>
Here is what it looks like right now-
http://jsfiddle.net/m74ets8v/1/
I want to style it according to actual looking funnel chart, for an example-
How would i be styling this chart to make sense for me.

Answer 1

.funnel_outer{width:420px;float: left;position: relative;padding:0 10%;}
.funnel_outer *{box-sizing:border-box}
.funnel_outer ul{margin:0;padding:0;}
.funnel_outer ul li{float: left;position: relative;margin:2px 0;height: 50px;clear: both;text-align: center;width:100%;list-style:none}
.funnel_outer li span{ border-top-width: 50px;border-top-style: solid; border-left: 25px solid transparent; border-right:25px solid transparent; height: 0;display: inline-block;vertical-align: middle; }
.funnel_step_1 span{width:100%;border-top-color: #8080b6;}
.funnel_step_2 span{width:calc(100% - 50px);border-top-color: #669966}
.funnel_step_3 span{width:calc(100% - 100px);border-top-color: #a27417}
.funnel_step_4 span{width:calc(100% - 150px);border-top-color: #ff66cc}
.funnel_step_5 span{width:calc(100% - 200px);border-top-color: #0099ff}
.funnel_step_6 span{width:calc(100% - 250px);border-top-color: #027002}
.funnel_step_7 span{width:calc(100% - 300px);border-top-color: #ff0000;}
.funnel_outer ul li:last-child span{border-left: 0;border-right: 0;border-top-width: 40px;}
.funnel_outer ul li.not_last span{border-left: 5px solid transparent;border-right:5px solid transparent;border-top-width:50px;}
.funnel_outer ul li span p{margin-top: -30px;color:#fff;font-weight: bold;text-align: center;}
<div class="funnel_outer">
<ul>
<li class="funnel_step_1"><span><p>1</p></span></li>
<li class="funnel_step_2"><span><p>2</p></span> </li>
<li class="funnel_step_3"><span><p>3</p></span></li>
<li class="funnel_step_4"><span><p>4</p></span></li>
<li class="funnel_step_5"><span><p>5</p></span></li>
<li class="funnel_step_6"><span><p>6</p></span></li>
<li class="funnel_step_7"><span><p>7</p></span></li>
</ul>
</div>

Answer 2

The secret is to use margin: 0 auto for the lis. Setting the automatic margin calculation for the left/right dimension will center a block element horizontally. (Unfortunately, this technique doesn't work for vertical centering, but that's a different story.)
Here's your code, slightly modified, in a working example:
ul, li { margin: 0; padding: 0; list-style: none; }
ul { width: 400px; }
li { height: 70px; margin: 0 auto; }
/* NOTE: nth-child would be the better way to assign CSS to a set of
uniform elements than one class per li, but let's keep it simple for now */
li.li1 { width: 50%; background-color: yellow; }
li.li2 { width: 40%; background-color: #98bf26; }
li.li3 { width: 30%; background-color: orange; }
li.li4 { width: 20%; background-color: #c10000; }
<ul>
<li class='li1'>pendora</li>
<li class='li2'>pending</li>
<li class='li3'>pen</li>
<li class='li4'>Test</li>
</ul>
By the way, as already noted in the comments: In order to have actual trapezoids, you would (as far as I know) need to use SVG, and of course appropriate fallbacks for browser that don't support it.

Answer 3

If, as i read from comments, you just need to center the <li> elements you can set the an auto margin.
#funnel-cht>li
{
display:block;
margin:0 auto;
}