2016-02-23 23 views
9

voglio ottenere il seguente effetto con i CSS:Font larghezza percentuale impressionante icona impilato

enter image description here

Questa icona stella è un tipo di carattere. Mi piacerebbe definire la larghezza dello sfondo arancione in percentuale, quindi il 50% dovrebbe essere la metà perfetta della stella.

Per ora, ho fatto la seguente:

<div class="container"> 
    <span class="star star-under fa fa-star"></span> 
    <span class="star star-over fa fa-star"></span> 
</div> 

E:

.container 
{ 
    font-size: 200px; 
    height: 300px; 
    position: relative; 
    width: 100%; 
} 

.star 
{ 
    display: inline-block; 
    left: 0; 
    position: absolute; 
    top: 0; 
} 

.star-under 
{ 
    color: #ddd; 
} 

.star-over 
{ 
    color: #f80; 
    overflow: hidden; 
    width: 30%; 
} 

Il problema è che ho bisogno di fornire la larghezza e l'altezza in modo da utilizzare% della larghezza. E se ignoro la larghezza e l'altezza del contenitore, non visualizza nulla, perché contiene bambini posizionati in modo assoluto.

Questo valore% è calcolato sul lato server, quindi preferirei tenerlo in linea, in questo modo:

<span class="star star-over fa fa-star" style="width: 62%;"></span> 

Qual è il modo più flessibile per fare questo? Con la massima flessibilità intendo quello che non rende necessario fornire larghezza o altezza.

+0

https://jsfiddle.net/vco9r2rt/3/ –

+0

@Moogs E 'fantastico, ma ho bisogno di fare questo in linea di larghezza - è calcolato nel mio script server. Ovviamente potrei mettere i CSS nel mio file HTML, ma vorrei evitarlo. –

+0

https://jsfiddle.net/vco9r2rt/4/ –

risposta

3

È possibile impostare il contenitore su display:inline-block e impostare l'icona in alto su position:absolute.

.container { 
 
    font-size: 200px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.star-under { 
 
    color: #ddd; 
 
    vertical-align: top; 
 
} 
 
.star-over { 
 
    color: #f80; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 70%; 
 
    overflow: hidden; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
<div class="container"> 
 
    <span class="star star-under fa fa-star"></span> 
 
    <span class="star star-over fa fa-star"></span> 
 
</div>

+0

In realtà ho provato un modo simile, ma ho ottenuto i miei risultati ineguali. Le posizioni del testo non corrispondevano se una era stata messa senza "posizione: assoluta" e la seconda era. Devo ispezionare tutti gli stili ereditati. –

+1

Ho notato che anche prima, quindi ho aggiunto 'vertical-align' e sembra funzionare bene. – Stickers

+0

Ha, è un'idea! Lo proverò e selezionerò la tua risposta se funziona! Grazie compagno. –