html超百分比圆形图,纯CSS实现饼图、环形图（百分比）

一、饼图

.pie {

width: 100px;

height: 100px;

border-radius: 50%;

background: yellowgreen;

background-image: linear-gradient(to right, transparent 50%, #655 0);

}

.pie::before {

content: '';

display: block;

margin-left: 50%;

height: 100%;

border-radius: 0 100% 100% 0/50%;

background-color: inherit;

transform-origin: left;

transform: rotate(.2turn);

}

二、环形图

.loading {

margin: 100px auto;

width: 8em;

height: 8em;

position: relative;

}

.loading .progress {

position: absolute;

width: 6em;

height: 6em;

background-color: white;

border-radius: 50%;

left: 1em;

top: 1em;

line-height: 6em;

text-align: center;

}

.left,

.right {

width: 4em;

height: 8em;

overflow: hidden;

position: relative;

float: left;

background-color: #999999

}

.left {

border-radius: 8em 0 0 8em;

}

.right {

border-radius: 0 8em 8em 0;

}

.left:after,

.right:after {

content: "";

position: absolute;

display: block;

width: 4em;

height: 8em;

background-color: white;

border-radius: 8em 0 0 8em;

background-color: red;

}

.right:after {

content: "";

position: absolute;

display: block;

border-radius: 0 8em 8em 0;

}

.left:after {

transform-origin: right center;

}

.right:after {

transform-origin: left center;

transform: rotateZ(45deg);

}

85%