Stylizowanie układu stosu ścieżek przy użyciu natywnego kodu CSS i HTML

Question

Chcę wyświetlić dane, takie jak stos ścieżek, jak pokazano poniżej.

udało mi się stworzyć stożek używając granic, na przykład:

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

i stosując następujący CSS:

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

oczywiście pomysłem byłoby zawiń ten div.taper w pojemniku, dodaj inne elementy i umieść je w razie potrzeby, trochę pracy, ale wykonalne.

Jednak nie koniecznie wiem, ile wierszy (poziomów, 7 w tym przykładzie) będzie potrzebnych i naprawdę nie chcę dużo matematyki, aby określić szerokość każdego stożka i tak dalej.

Jeśli istnieje bardziej odporny na kule sposób robienia tego?

Nie chcę rozwiązania opartego na języku JavaScript/jQuery (staram się zachować lekkość) i wolałbym unikać obrazów tła (mogę chcieć skóry/dostosować kolory później i nie chcę zawracać sobie głowy plikami obrazu).

odniesienia Fiddle: wsparcie http://jsfiddle.net/audetwebdesign/fBax3/

Przeglądarka: Nowoczesne przeglądarki są w porządku, obsługa Legacy, tak długo, jak to ładnie rozkłada.

Answer 1

TL; DR: patrz przykład na http://jsfiddle.net/97Yr6/

---

taki sposób, aby utworzyć stos lejka jest z pseudoelements: Przy tej podstawowej znaczników

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

mogliśmy utwórz ścieżkę za pomocą obramowania, abyśmy mogli narysować rodzaj trapezu jako tła w ten sposób:

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% szerokości, aby można było nadać mu text-align: center i wszystkie ilości są prawidłowo wycentrowane

Następnie przestrzeń pomiędzy elementami można uzyskać również z pseudoelements jeszcze:

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

podczas umieszczania tekstu podpowiedzi (<li> musi być zdefiniowany jako position: relative), starając się odpowiednio dopasować właściwości zarówno left, jak i margin-left (szczególnie dla niższych rozdzielczość ekranu, ale możesz użyć mediów do tego celu), np.

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

zasadzie ten przykład może pracować nawet na IE8 jeśli zmienisz każdą :nth-child z selektora przylegania (np li + li + li + ... + span)

nadzieję, że może to być pomocne.

Answer 2

Podoba mi się podejście polegające na podzieleniu go na kilka elementów div. See the code here

muszę dodać kod więc przykład:

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

i 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

dla osób poszukujących lejek z różnych kolorów dla każdej warstwy w stosie:

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

Ryan,

Dzięki za przykład kodu! Wziąłem twój przykład i nieco go zmieniłem, aby odzwierciedlić moje potrzeby związane z projektem. Może ktoś uzna to za pomocne.

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

Oto kolejny wziąć na nią, ta wersja jest nieco bardziej elastyczne: 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>