Percentage Circle

結構

percentage-circle-min

75%圓弧

<div class="outter">
   <div class="sq1"></div>
   <div class="sq2"></div>
   <div class="inner">
     <h4>75%</h4>
   </div>
</div>
.outter{
 width: 150px; height: 150px;
 background: #c1d7ae;
 border-radius: 100%;
 position: relative;
 overflow: hidden;
}

.sq1{
 width: 150px; height: 150px;
 position: absolute;
 left: 75px;
 background-color: #90a955;
}

.sq2{
 width: 75px; height: 75px;
 position: absolute;
 top: 75px;
 background-color: #90a955;
}

.inner{
 width: 140px; height: 140px; 
 border-radius: 100%;
 position: absolute;
 top: 5px;
 left: 5px;
 background-color: white;
 overflow: hidden;
}

.inner h4{
 text-align: center;
 line-height: 35px;
 font-size: 40px;
 font-family: Verdana, Geneva, sans-serif;
 font-weight: 300;
 color: #6A7152;
}

Display

75%

補充:傾斜效果

transform-origin: 傾斜後不要位移的地方(bottom, top等);
transform: X偏移skewX(度數30deg);
<div></div>
div{
 width: 75px; height: 75px;
 background-color: #90a955;
 transform-origin: bottom;
 transform: skewX(30deg);
}

Display

90%圓弧:左上方放一個傾斜的正方形

<div class="outter-2">
  <div class="sq1-2"></div>
  <div class="sq2-2"></div>
  <div class="sq3-2"></div>
  <div class="inner-2">
   <h4>90%</h4>
  </div>
</div>
.outter-2{
 width: 150px; height: 150px;
 background: #c1d7ae;
 border-radius: 100%;
 position: relative;
 overflow: hidden;
}

.sq1-2{
 width: 150px; height: 150px;
 position: absolute;
 left: 75px;
 background-color: #90a955;
}

.sq2-2{
 width: 75px; height: 75px;
 position: absolute;
 top: 75px;
 background-color: #90a955;
}

.sq3-2{
 width: 75px; height: 75px;
 background-color: #90a955;
 transform-origin: bottom;
 transform: skewX(30deg);
}

.inner-2{
 width: 140px; height: 140px; 
 border-radius: 100%;
 
 position: absolute;
 top: 5px;
 left: 5px;
 background-color: white;
 overflow: hidden;
}

.inner-2 h4{
 text-align: center;
 line-height: 35px;
 font-size: 40px;
 font-family: Verdana, Geneva, sans-serif;
 font-weight: 300;
 color: #6A7152;
}

Display

90%

範例

CODEPEN

Leave a Reply

Your email address will not be published. Required fields are marked *