html流程进度效果,如何用html/css实现简历中的技能进度效果 如图

我是通过写把圆弧分解为4个正方形定位在四个角

然后根据百分比来对四个正方形进行显示或隐藏以及旋转角度来达到显示效果

HTML

25%

50%

70%

90%

CSS

.circle-level {

display: inline-block;

position: relative;

width: 200px;

height: 200px;

background: #CCC;

border-radius: 50%;

overflow: hidden;

line-height: 200px;

text-align: center;

}

.circle-level:after {

content: "";

position: absolute;

top: 15px;

left: 15px;

width: 170px;

height: 170px;

background: #FFF;

border-radius: 50%;

z-index: 2;

}

.circle-level .score {

font-size: 30px;

position: relative;

z-index: 3;

}

.circle-level .arc {

position: absolute;

background: blue;

width: 100px;

height: 100px;

z-index: 1;

}

.circle-level .arc:nth-child(1) {

top: 0;

right: 0;

}

.circle-level .arc:nth-child(2) {

top: 100px;

right: 0;

}

.circle-level .arc:nth-child(3) {

top: 100px;

right: 100px;

}

.circle-level .arc:nth-child(4) {

top: 0;

left: 0;

}

.level-1 .arc:nth-child(2),

.level-1 .arc:nth-child(3),

.level-1 .arc:nth-child(4) {

display: none;

}

.level-2 .arc:nth-child(3),

.level-2 .arc:nth-child(4) {

display: none;

}

.level-3 .arc:nth-child(3) {

transform-origin: 50% 100%;

transform: rotate(45deg);

}

.level-3 .arc:nth-child(4) {

display: none;

}

.level-4 .arc:nth-child(4) {

transform-origin: 0% 0%;

transform: rotate(45deg);

}