Stile di layout di una canalizzazione con CSS e HTML nativi

Question

Desidero visualizzare i dati come la pila di imbuti come illustrato di seguito.

sono stato in grado di creare il cono con i bordi, ad esempio:

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

e utilizzando il seguente CSS:

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

Naturalmente, l'idea sarebbe quella di avvolgere questo div.taper in un contenitore, aggiungere altri elementi e posizionarli secondo le necessità, un po 'di lavoro ma fattibile.

Tuttavia, non è necessario conoscere il numero di linee (i livelli, 7 in questo esempio) saranno necessari e in realtà non voglio eseguire molti calcoli per determinare la larghezza di ciascun cono e così via.

Se esiste un modo più a prova di proiettile per farlo?

Non voglio una soluzione basata su JavaScript/jQuery (cercando di mantenere questo leggero) e preferirei evitare le immagini di sfondo (potrei voler skin/personalizzare i colori in seguito e non voglio disturbare con i file di immagine).

Fiddle di riferimento: il supporto http://jsfiddle.net/audetwebdesign/fBax3/

Browser: browser moderni vanno bene, il supporto legacy, a patto che si degrada bene.

Answer 1

TL; DR: vedere l'esempio a http://jsfiddle.net/97Yr6/

---

Un modo per creare un gruppo imbuto è con pseudoelements: con questo marcatore base

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

potremmo crea la canalizzazione usando i bordi, così possiamo disegnare una specie di trapezio come sfondo in questo modo:

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

Il <ul> è larga 100%, quindi abbiamo potuto dare un text-align: center e tutti i valori sono correttamente centrato

Quindi potrebbe essere ottenuto lo spazio tra gli elementi anche con pseudoelements ancora:

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

mentre il testo del tooltip può essere posizionato (lo <li> deve avere position: relative definito), cercando di regolare correttamente entrambe le proprietà left e margin-left (in particolare per risoluzione dello schermo, ma è possibile utilizzare mediaqueries per questo scopo), ad es.

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

fondamentalmente questo esempio può funzionare anche su IE8 se si cambia ogni :nth-child con il selettore adiacenze (ad esempio li + li + li + ... + span)

Spero che potrebbe essere utile.

Answer 2

Mi piace l'approccio di dividerlo in poche div. See the code here

devo aggiungere codice in modo un esempio:

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

e 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

Per chi cerca un imbuto con colori diversi per ogni livello nella pila:

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,

Grazie per il tuo esempio di codice! Ho preso il tuo esempio e l'ho modificato un po 'per riflettere le esigenze del mio progetto. Forse qualcuno lo troverà utile.

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

Ecco un altro prendere su di esso, questa versione è un po 'più reattivo: 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>