使用本机CSS和HTML为样式设计漏斗堆栈布局 [英] Styling a funnel stack layout using native CSS and HTML

问题描述

我想显示数据，如下图所示的渠道堆栈。

I want to show the data like funnel stack as illustrated below.

我可以使用边框创建渐变，例如：

I was able to create the taper using borders, for example:

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

并使用以下CSS：

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

当然，这个想法是包装

Of course, the idea would be to wrap this div.taper in a container, add other elements and position them as needed, a bit of work but doable.

但是，我不能在一个容器中添加其他元素并将它们放置在需要的位置，不一定知道需要多少线（级别，在这个例子中为7），我真的不想做很多数学来确定每个锥度的宽度等等。

However, I don't necessarily know how many lines (levels, 7 in this example) will be needed and I don't really want to do a lot of math to determine the width of each taper and so on.

如果有更多的防弹方法这样做？

If there a more bullet-proof way of doing this?

我不想要一个基于JavaScript / jQuery的解决方案），并宁愿避免背景图像（我可能想皮肤/自定义颜色以后，不想打扰图像文件）。

I don't want a JavaScript/jQuery based solution (trying to keep this lightweight) and would prefer to avoid background images (I may want to skin/customize the colors later and don't want to bother with image files).

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

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

Browser support: modern browsers are fine, legacy support, as long as it degrades nicely.

推荐答案

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

---

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

---

A way to create a funnel stack is with pseudoelements: with this basic markup

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

我们可以使用边框创建漏斗，所以我们可以绘制一种梯形作为背景方式：

we could create the funnel using borders, so we can draw a kind of trapezoid as a background in this way:

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

< ul> 是100％宽，因此我们可以给它一个 text-align：center ，所有金额都正确集中

The <ul> is 100% wide, so we could give it a text-align: center and all the amounts are properly centered

然后元素之间的空间可以再次与伪元素一起获得：

Then the space between elements could be obtained as well with pseudoelements again:

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> / code>需要具有 position：relative 定义），尝试正确调整 left 和 margin-left 属性（特别是为了降低屏幕分辨率，但您可以为此使用媒体查询），例如

while the tooltip text could be positioned (the <li> needs to have position: relative defined), trying to properly adjust both left and margin-left properties (especially for lower screen resolution, but you may use mediaqueries for this purpose), e.g.

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 ）

basically this example may work even on IE8 if you change each :nth-child with the adjacency selector (e.g. li + li + li + ... + span )

希望这会很有帮助。

这篇关于使用本机CSS和HTML为样式设计漏斗堆栈布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！