私はCSSで次のような効果を達成したい:フォント素晴らしい割合幅積み重ねられたアイコン
この星のアイコンはフォントです。私はパーセントでオレンジ色の背景の幅を定義したいので、50%は星の完全な半分でなければなりません。今の
、私は次のようでした:
<div class="container">
<span class="star star-under fa fa-star"></span>
<span class="star star-over fa fa-star"></span>
</div>
そして:
.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%;
}
を問題は、私は幅の%を使用するために、幅と高さを提供する必要があるということです。また、コンテナの幅と高さをスキップすると、絶対配置された子が含まれているため、何も表示されません。
この%値は、サーバー側で計算されますので、私はむしろ、このように、インラインそれを維持したい:
<span class="star star-over fa fa-star" style="width: 62%;"></span>
これを行うには、最も柔軟な方法は何ですか?最もフレキシブルなのは、幅や高さを指定する必要がないことを意味します。
https://jsfiddle.net/vco9r2rt/3/素晴らしいですが、私は、この幅インラインを行う必要があり –
@Moogs - それは私のサーバースクリプトで計算しています。私はもちろんHTMLファイルにCSSを置くことができますが、私はそれを避けたいと思います。 –
https://jsfiddle.net/vco9r2rt/4/ –