在css中的漏斗图表

Question

我正在尝试根据我通过页面上的数据库呈现的数据来自定义漏斗图表。 除了图表的css渲染外，一切都很好。

    <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>

以下是现在的样子 - http://jsfiddle.net/m74ets8v/1/

我想根据实际的漏斗图来设计它，例如 -

我如何设计这个图表对我有意义。

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

秘诀是margin: 0 auto用于li。设置左/右维度的自动边距计算将使块元素水平居中。 （不幸的是，这种技术对于垂直居中并不起作用，但这是一个不同的故事。）

以下是您的代码，稍加修改，在一个工作示例中：

＆＃13;

＆＃13;

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; }

＆＃13;

<ul>
  <li class='li1'>pendora</li>
  <li class='li2'>pending</li>
  <li class='li3'>pen</li>
  <li class='li4'>Test</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

顺便说一下，正如评论中已经提到的：为了拥有实际的梯形，你（据我所知）你需要使用SVG，当然还有适合不支持它的浏览器的后备

Answer 3

如果我从评论中读到，您只需要将<li>元素居中，就可以设置自动边距。

#funnel-cht>li
{
    display:block;
    margin:0 auto;
}