使用原生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>