3 ответа
Есть такой интересный элемент meter
meter:before{
content: attr(title);
position: absolute
}
<meter low=".25" optimum=".15" high=".75" value="0.1" title="Time"></meter><br>
<meter low=".25" optimum=".15" high=".75" value="0.5" title="Price"></meter><br>
<meter low=".25" optimum=".15" high=".75" value="0.9" title="Quality"></meter><br>
-
2
-
Вот пример:
.item {
width: 160px;
height: 30px
background: #fff;
border: 1px solid;
}
.percent {
width: 78%;
height: 100%;
padding: 2px 6px;
background: red;
}
<div class="item">
<div class="percent">
Характеристика
</div>
</div>
Вариант на тот случай когда текст должен читаться одновременно на обоих фонах:
.item, .progress {
font-family:sans-serif;
font-size:14px;
font-weight:bold;
color:navy;
background-color:#F1F3F4;
height:30px;
line-height:30px;
padding:0px;
width:300px;
position:relative;
box-sizing:border-box;
}
.item {
box-shadow: 0 0 0 1px navy inset;
margin-bottom:10px;
}
.progress {
position:absolute;
background-color:rgba(0,0,0,0.5);
color:#fff;
overflow:hidden;
top:0px;
left:0;
}
span {padding-left:10px;}
<div class="item">
<span>Photoshop 15%</span>
<div class="progress" style="width:15%"><span>Photoshop 15%</span></div>
</div>
<div class="item">
<span>Corel Draw 100%</span>
<div class="progress" style="width:100%"><span>Corel Draw 100%</span></div>
</div>
<div class="item">
<span>Inkscape 0%</span>
<div class="progress" style="width:0%"><span>Inkscape 0%</span></div>
</div>
<div class="item">
<span>Paint 78%</span>
<div class="progress" style="width:78%"><span>Paint 78%</span></div>
</div>