CSS가있는 원형 주입 표시기 만 표시

Question

안녕하세요!

CSS에 작은 원형 정적 표시를 만들고 싶지만 해결책을 찾을 수 없습니다. 왼쪽의 제곱 된 표시기는 괜찮습니다.하지만 너무 번쩍 거리므로 원합니다!

둥근 모서리 (스크린 샷의 오른쪽에있는 표시기)를 사용해 보았습니다. 모서리를 숨길 수있는 둥근 마스크를 추가 할 가능성이 있는지 궁금합니다 (cf. css3 마스크 : http://webkit.org/blog/181/css-masks/). img에만 해당됩니다 ...

이 솔루션은 모바일 웹 응용 프로그램이기 때문에 웹킷 브라우저에서만 작동합니다.

<div class="meter-wrap"> 
    <div class="meter-value" style="background-color: #489d41; width: 70%;"> 
      <div class="meter-text"> 70 % </div> 
    </div> 
</div> 

그리고 CSS : 여기

위의 이미지에서 (추한) 표시 만들 수있는 내 코드입니다

.meter-wrap{ 
    position: relative; 
} 
.meter-value { 

background-color: #489d41; 

} 
.meter-wrap, .meter-value, .meter-text { 
    width: 30px; height: 30px; 
/* Attempt to round the corner : (indicators at the right of the screenshot) 
-webkit-border-radius : 15px;*/ 
} 
.meter-wrap, .meter-value { 
    background: #bdbdbd top left no-repeat; 
}   
.meter-text { 
    position: absolute; 
    top:0; left:0; 
    padding-top: 2px;   
    color: #000; 
    text-align: center; 
    width: 100%; 
font-size: 40%; 
text-shadow: #fffeff 1px 1px 0; 
} 

Answer 1

이 .meter-value 클래스 주위에 래퍼 추가를, 그 overflow을하는 설정 hidden 다음 원하는 효과를 얻으려면 해당 레이어의 너비를 설정하십시오. .meter-value 클래스의 둥근 모서리는 손상되지 않은 채로 유지되어야하며 멋진 유체 진행 표시기를 제공해야합니다.

당신은 너무 당신의 HTML은 같은 싶습니다 전환을 통해 볼 수있어 보장하기 위해 래퍼의 외부 .meter-text 사업부를 이동해야합니다 :

:처럼 보일 수 있습니다

<div class="meter-wrap">  
    <div class="meter-text"> 70 % </div> 
    <div class="meter-value-wrapper" style="width:70%;"> 
     <div class="meter-value" style="background-color: #489d41;"> 
    </div> 
</div> 

그리고 .meter-value-wrapper의 클래스를

.meter-value-wrapper { 
    overflow: hidden; 
    width: 30px; 
    height: 30px; 
}