使用原生CSS和HTML设计漏斗堆栈布局

Question

我想显示像漏斗堆栈这样的数据，如下所示。

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

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

浏览器支持：现代浏览器都很好，传统的支持，只要它很好地降解。

Answer 1

TL; DR：见http://jsfiddle.net/97Yr6/

---

创建一个漏斗堆栈的方式例子是pseudoelements：与此基本标记

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

的<ul>是宽100％，所以我们可以给它一个text-align: center，所有的量是正确居中

然后可以与pseudoelements再次获得元件之间的空间，以及：

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和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% } 

基本上，如果你改变每个:nth-child与邻接选择器（例如li + li + li + ... + span）

希望它可能是有帮助的这个例子中可以工作，即使在IE8。

Answer 2

我喜欢把它分成几个div的方法。 See the code here

我必须添加的代码，以便一个例子：

<div class="cont"> 
    <div class="taper-left"></div> 
    <div class="taper-center">123,456,789</div> 
    <div class="taper-right"></div> 
</div> 

和CSS：

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

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

.taper-center { 
width: 200px; 
height: 34px; 
border-color: lightgray transparent; 
border-style: solid; 
background-color: lightgray transparent; 
background-color: lightgray; 
float: left; 
text-align: center; 
padding-top: 10px; 
} 

Answer 3

对于那些寻找具有不同颜色的一个漏斗堆栈中的每个层：

http://jsfiddle.net/D9GLr/

HTML：

<ul> 
    <li>1,234,567,890</li> 
    <li>234,567,890</li> 
    <li>23,456,789</li> 
    <li>2,345,678</li> 
    <li>234,567</li> 
</ul> 

CSS：

ul { 
    margin: 0 200px; padding: 0; 
    list-style: none; 
    text-align: center; 
} 

li { 
    font-size:14px; 
    line-height:30px; 
    height:30px; 
    width:200px; 
    position:relative; 
    background:#ccc; 
    border-bottom:1px solid #fff; 
} 

li:before { 
    content: ""; 
    position: absolute; 
    z-index: 10; 
    left: 0%; 
    margin-left: -30px; 
    width:30px; 
    border-top: 30px solid #ccc; 
    border-left: 30px solid transparent; 
} 
li:after { 
    content: ""; 
    position: absolute; 
    z-index: 10; 
    right: 0%; 
    margin-left: 30px; 
    width:30px; 
    border-top: 30px solid #ccc; 
    border-right: 30px solid transparent; 
} 

li:nth-child(1) { background:#ddd; } 
li:nth-child(1):before, 
li:nth-child(1):after { border-top-color:#ddd; } 
li:nth-child(1):before { width:200px; margin-left: -200px; } 
li:nth-child(1):after { width:200px; margin-right:-200px; } 

li:nth-child(2) { background:#bbb; } 
li:nth-child(2):before,li:nth-child(2):after { border-top-color:#bbb; } 
li:nth-child(2):before { width:170px; margin-left: -170px; } 
li:nth-child(2):after { width:170px; margin-right:-170px; } 

li:nth-child(3) { background:#999; } 
li:nth-child(3):before, 
li:nth-child(3):after { border-top-color:#999; } 
li:nth-child(3):before { width:140px; margin-left: -140px; } 
li:nth-child(3):after { width:140px; margin-right:-140px; } 

li:nth-child(4) { background:#777; } 
li:nth-child(4):before, 
li:nth-child(4):after { border-top-color:#777; } 
li:nth-child(4):before { width:110px; margin-left: -110px; } 
li:nth-child(4):after { width:110px; margin-right:-110px; } 

li:nth-child(5) { background:#555; } 
li:nth-child(5):before, 
li:nth-child(5):after { border-top-color:#555; } 
li:nth-child(5):before { width:80px; margin-left: -80px; } 
li:nth-child(5):after { width:80px; margin-right:-80px; } 

Answer 4

瑞安，

感谢您的代码示例！我拿你的例子，并改变了一下，以反映我的项目需求。也许有人会觉得这有帮助。

body { 
 
    font-family: Lato, Arial, Helvetica, sans-serif; 
 
} 
 
.center-text { 
 
    text-align: center; 
 
    margin: 0px auto; 
 
} 
 
.funnel { 
 
    width: 750px; 
 
    margin: 0 auto; 
 
} 
 
ul.one { 
 
    margin: 40px 278px; 
 
    padding: 0; 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 
.one .funnel-top { 
 
    position: absolute; 
 
    top: -7px; 
 
    left: -199px; 
 
    z-index: 20; 
 
    width: 599px; 
 
    height: 14px; 
 
    background: #919eb1; 
 
    border-radius: 100%; 
 
} 
 
.one .funnel-bottom { 
 
    position: absolute; 
 
    bottom: -7px; 
 
    left: -20px; 
 
    z-index: 20; 
 
    width: 240px; 
 
    height: 16px; 
 
    background: #273445; 
 
    border-radius: 100%; 
 
} 
 
.one li { 
 
    font-size: 16px; 
 
    line-height: 70px; 
 
    height: 70px; 
 
    width: 200px; 
 
    position: relative; 
 
    background: #ccc; 
 
    color: #ffffff; 
 
    font-weight: bold; 
 
} 
 
.one li span { 
 
    background: rgba(255, 255, 255, 0.3); 
 
    padding: 5px 8px; 
 
    border-radius: 4px; 
 
    margin-left: 15px; 
 
} 
 
.one li:before { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: 10; 
 
    left: 0%; 
 
    margin-left: -30px; 
 
    width: 30px; 
 
    border-top: 70px solid #ccc; 
 
    border-left: 30px solid transparent; 
 
} 
 
.one li:after { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: 10; 
 
    right: 0%; 
 
    margin-left: 30px; 
 
    width: 30px; 
 
    border-top: 70px solid #ccc; 
 
    border-right: 30px solid transparent; 
 
} 
 
.one li:nth-child(1) { 
 
    background: #919eb1; 
 
} 
 
.one li:nth-child(1):before, 
 
.one li:nth-child(1):after { 
 
    border-top-color: #919eb1; 
 
} 
 
.one li:nth-child(1):before { 
 
    width: 200px; 
 
    margin-left: -200px; 
 
} 
 
.one li:nth-child(1):after { 
 
    width: 200px; 
 
    margin-right: -200px; 
 
} 
 
.one li:nth-child(2) { 
 
    background: #8491a5; 
 
} 
 
.one li:nth-child(2):before, 
 
.one li:nth-child(2):after { 
 
    border-top-color: #8491a5; 
 
} 
 
.one li:nth-child(2):before { 
 
    width: 170px; 
 
    margin-left: -170px; 
 
} 
 
.one li:nth-child(2):after { 
 
    width: 170px; 
 
    margin-right: -170px; 
 
} 
 
.one li:nth-child(3) { 
 
    background: #778599; 
 
} 
 
.one li:nth-child(3):before, 
 
.one li:nth-child(3):after { 
 
    border-top-color: #778599; 
 
} 
 
.one li:nth-child(3):before { 
 
    width: 140px; 
 
    margin-left: -140px; 
 
} 
 
.one li:nth-child(3):after { 
 
    width: 140px; 
 
    margin-right: -140px; 
 
} 
 
.one li:nth-child(4) { 
 
    background: #6d7b8f; 
 
} 
 
.one li:nth-child(4):before, 
 
.one li:nth-child(4):after { 
 
    border-top-color: #6d7b8f; 
 
} 
 
.one li:nth-child(4):before { 
 
    width: 110px; 
 
    margin-left: -110px; 
 
} 
 
.one li:nth-child(4):after { 
 
    width: 110px; 
 
    margin-right: -110px; 
 
} 
 
.one li:nth-child(5) { 
 
    background: #606f84; 
 
} 
 
.one li:nth-child(5):before, 
 
.one li:nth-child(5):after { 
 
    border-top-color: #606f84; 
 
} 
 
.one li:nth-child(5):before { 
 
    width: 80px; 
 
    margin-left: -80px; 
 
} 
 
.one li:nth-child(5):after { 
 
    width: 80px; 
 
    margin-right: -80px; 
 
} 
 
.one li:nth-child(6) { 
 
    background: #536075; 
 
} 
 
.one li:nth-child(6):before, 
 
.one li:nth-child(6):after { 
 
    border-top-color: #536075; 
 
} 
 
.one li:nth-child(6):before { 
 
    width: 50px; 
 
    margin-left: -50px; 
 
} 
 
.one li:nth-child(6):after { 
 
    width: 50px; 
 
    margin-right: -50px; 
 
} 
 
ul.two { 
 
    margin: 40px 278px; 
 
    padding: 0; 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 
.two .funnel-top { 
 
    position: absolute; 
 
    top: -7px; 
 
    left: -199px; 
 
    z-index: 20; 
 
    width: 599px; 
 
    height: 14px; 
 
    background: #1b99e6; 
 
    border-radius: 100%; 
 
} 
 
.two .funnel-bottom { 
 
    position: absolute; 
 
    bottom: -7px; 
 
    left: -20px; 
 
    z-index: 20; 
 
    width: 240px; 
 
    height: 16px; 
 
    background: #003352; 
 
    border-radius: 100%; 
 
} 
 
.two li { 
 
    font-size: 16px; 
 
    line-height: 70px; 
 
    height: 70px; 
 
    width: 200px; 
 
    position: relative; 
 
    background: #ccc; 
 
    color: #ffffff; 
 
    font-weight: bold; 
 
} 
 
.two li span { 
 
    background: rgba(255, 255, 255, 0.3); 
 
    padding: 5px 8px; 
 
    border-radius: 4px; 
 
    margin-left: 15px; 
 
} 
 
.two li:before { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: 10; 
 
    left: 0%; 
 
    margin-left: -30px; 
 
    width: 30px; 
 
    border-top: 70px solid #ccc; 
 
    border-left: 30px solid transparent; 
 
} 
 
.two li:after { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: 10; 
 
    right: 0%; 
 
    margin-left: 30px; 
 
    width: 30px; 
 
    border-top: 70px solid #ccc; 
 
    border-right: 30px solid transparent; 
 
} 
 
.two li:nth-child(1) { 
 
    background: #1b99e6; 
 
} 
 
.two li:nth-child(1):before, 
 
.two li:nth-child(1):after { 
 
    border-top-color: #1b99e6; 
 
} 
 
.two li:nth-child(1):before { 
 
    width: 200px; 
 
    margin-left: -200px; 
 
} 
 
.two li:nth-child(1):after { 
 
    width: 200px; 
 
    margin-right: -200px; 
 
} 
 
.two li:nth-child(2) { 
 
    background: #148ad3; 
 
} 
 
.two li:nth-child(2):before, 
 
.two li:nth-child(2):after { 
 
    border-top-color: #148ad3; 
 
} 
 
.two li:nth-child(2):before { 
 
    width: 170px; 
 
    margin-left: -170px; 
 
} 
 
.two li:nth-child(2):after { 
 
    width: 170px; 
 
    margin-right: -170px; 
 
} 
 
.two li:nth-child(3) { 
 
    background: #117fc3; 
 
} 
 
.two li:nth-child(3):before, 
 
.two li:nth-child(3):after { 
 
    border-top-color: #117fc3; 
 
} 
 
.two li:nth-child(3):before { 
 
    width: 140px; 
 
    margin-left: -140px; 
 
} 
 
.two li:nth-child(3):after { 
 
    width: 140px; 
 
    margin-right: -140px; 
 
} 
 
.two li:nth-child(4) { 
 
    background: #0b75b6; 
 
} 
 
.two li:nth-child(4):before, 
 
.two li:nth-child(4):after { 
 
    border-top-color: #0b75b6; 
 
} 
 
.two li:nth-child(4):before { 
 
    width: 110px; 
 
    margin-left: -110px; 
 
} 
 
.two li:nth-child(4):after { 
 
    width: 110px; 
 
    margin-right: -110px; 
 
} 
 
.two li:nth-child(5) { 
 
    background: #006bac; 
 
} 
 
.two li:nth-child(5):before, 
 
.two li:nth-child(5):after { 
 
    border-top-color: #006bac; 
 
} 
 
.two li:nth-child(5):before { 
 
    width: 80px; 
 
    margin-left: -80px; 
 
} 
 
.two li:nth-child(5):after { 
 
    width: 80px; 
 
    margin-right: -80px; 
 
} 
 
.two li:nth-child(6) { 
 
    background: #005f98; 
 
} 
 
.two li:nth-child(6):before, 
 
.two li:nth-child(6):after { 
 
    border-top-color: #005f98; 
 
} 
 
.two li:nth-child(6):before { 
 
    width: 50px; 
 
    margin-left: -50px; 
 
} 
 
.two li:nth-child(6):after { 
 
    width: 50px; 
 
    margin-right: -50px; 
 
}

<br /> 
 

 
<div class="funnel leads estimated"> 
 
    <h2 class="center-text">Estimated 100 Day Lead Conversion</h2> 
 
    <ul class="one"> 
 
    <li> 
 
     <div class="funnel-top"></div> 
 
     1574<span>Contacts</span> 
 
    </li> 
 
    <li>203<span>MQL2</span> 
 
    </li> 
 
    <li>112<span>MQL2</span> 
 
    </li> 
 
    <li>57<span>SAL</span> 
 
    </li> 
 
    <li>11<span>SQL</span> 
 
    </li> 
 
    <li> 
 
     <div class="funnel-bottom"></div> 
 
     4<span>Wins</span> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="funnel leads estimated"> 
 
    <h2 class="center-text">Actual 100 Day Lead Conversion</h2> 
 
    <ul class="two"> 
 
    <li> 
 
     <div class="funnel-top"></div> 
 
     1574<span>Contacts</span> 
 
    </li> 
 
    <li>203<span>MQL2</span> 
 
    </li> 
 
    <li>112<span>MQL2</span> 
 
    </li> 
 
    <li>57<span>SAL</span> 
 
    </li> 
 
    <li>11<span>SQL</span> 
 
    </li> 
 
    <li> 
 
     <div class="funnel-bottom"></div> 
 
     4<span>Wins</span> 
 
    </li> 
 
    </ul> 
 
</div>

View on JSFiddle

Answer 5

这里的另一个走就可以了，这个版本是一个比较敏感：https://jsfiddle.net/ehynds/j3fL6hof

.funnel { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    color: #fff; 
 
    background-color: #fff; 
 
} 
 

 
li { 
 
    padding: 10px 5px; 
 
    margin: 0; 
 
    background-color: #409ca9; 
 
    margin-bottom: 5px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
div:last-child { 
 
    font-size: 36px 
 
} 
 

 
li:last-child { 
 
    background-color: #a5c13f; 
 
} 
 

 
li:before, 
 
li:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    height: 0; 
 
    border-bottom: 90px solid #fff; 
 
} 
 

 
li:before { 
 
    left: 0; 
 
    border-right: 27px solid transparent; 
 
    border-left: 0; 
 
} 
 

 
li:after { 
 
    right: 0; 
 
    border-left: 27px solid transparent; 
 
    border-right: 0; 
 
} 
 

 
li:nth-child(1):before, 
 
li:nth-child(1):after { 
 
    width: 0; 
 
} 
 

 
li:nth-child(2):before, 
 
li:nth-child(2):after { 
 
    width: 25px; 
 
} 
 

 
li:nth-child(3):before, 
 
li:nth-child(3):after { 
 
    width: 50px; 
 
} 
 

 
li:nth-child(4):before, 
 
li:nth-child(4):after { 
 
    width: 75px; 
 
    height: 100%; 
 
    border: 0; 
 
    background-color: #fff; 
 
}

<ul class="funnel"> 
 
    <li> 
 
    <div>First Segment</div> 
 
    <div>12,345</div> 
 
    </li> 
 
    <li> 
 
    <div>Second Segment</div> 
 
    <div>2,345</div> 
 
    </li> 
 
    <li> 
 
    <div>Third Segment</div> 
 
    <div>345</div> 
 
    </li> 
 
    <li> 
 
    <div>Fourth Segment</div> 
 
    <div>45</div> 
 
    </li> 
 
</ul>