使用本机 CSS 和 HTML 设置漏斗堆栈布局样式

我想显示类似漏斗堆栈的数据，如下图所示。

我能够使用边框创建锥度，例如：

<div class="taper"></div>

并使用以下 CSS：

.taper {
    width: 200px;
    height: 0px;
    border-color: lightgray transparent;
    border-style: solid;
    border-width: 50px 25px 0 25px;
} 

当然，我们的想法是把它包装起来div.taper在容器中，添加其他元素并根据需要放置它们，需要一些工作但可行。

但是，我不一定知道需要多少条线（本例中为 7 层），而且我也不想进行大量数学计算来确定每个锥度的宽度等。

是否有更防弹的方法来做到这一点？

我不想要基于 JavaScript/jQuery 的解决方案（试图保持轻量级），并且更愿意避免背景图像（我可能想要稍后换肤/自定义颜色，并且不想打扰图像文件）。

小提琴参考：http://jsfiddle.net/audetwebdesign/fBax3/ http://jsfiddle.net/audetwebdesign/fBax3/

浏览器支持：现代浏览器很好，旧版支持，只要它能很好地降级。

TL;DR: 请参阅示例http://jsfiddle.net/97Yr6/ http://jsfiddle.net/97Yr6/

创建漏斗堆栈的一种方法是使用伪元素：使用这个基本标记

<ul>
    <li>1,234,567,890 <span>Tooltip: 0</span></li>
    <li>234,567,890 <span>Tooltip: 0</span></li>    
    <li>23,456,789</li>    
    <li>2,345,678 <span>Tooltip: 0</span></li>    
    <li>234,567</li>  
    <li>23,567  <span>Tooltip: 0</span></li>
    <li>4,567<span>Tooltip: 0</span></li>    
    <li>789</li>    
    <li>23 <span>Tooltip: 0</span></li>
    <li>4 <span>Tooltip: 0</span></li>    
</ul>

我们可以使用边框创建漏斗，因此我们可以这样绘制一种梯形作为背景：

ul { 
    position: relative; 
    overflow: hidden; 
    font: 14px Arial; 
    margin: 0; padding: 0; 
    list-style: none; 
    text-align: center; 
}


ul:before { 
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    margin-left: -120px;
    width: 0;
    border-top: 800px solid #ccc;
    border-left: 120px solid #fff;
    border-right: 120px solid #fff;
}

The <ul>是 100% 宽，所以我们可以给它一个text-align: center并且所有金额都正确居中

然后元素之间的空间也可以再次使用伪元素获得：

li:after,li:before {
   content: "";
   display: block;
   height: 0.4em;
   background: #fff;
   width: 100%;
}
li:before { border-top: 1px dotted #ccc }
li:first-child:before { border: 0; }

而工具提示文本可以定位（<li>需要有position: relative定义），尝试适当调整两者left and margin-left属性（特别是对于较低的屏幕分辨率，但您可以使用媒体查询来实现此目的），例如

li span {
    position: absolute;
    left: 60%;
    white-space: nowrap;
    margin-left: 100px;
}

li:nth-child(2) span { left: 59%; }
li:nth-child(3) span { left: 58% }
li:nth-child(4) span { left: 57% }
li:nth-child(5) span { left: 56% }
li:nth-child(6) span { left: 55% }
li:nth-child(7) span { left: 54% }
li:nth-child(8) span { left: 53% }
li:nth-child(9) span { left: 52% }
li:nth-child(10) span { left: 51% }

基本上这个例子甚至可以工作IE8如果你改变每一个:nth-child使用邻接选择器（例如li + li + li + ... + span )

希望它能有所帮助。