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

本篇文章详细介绍了如何使用纯CSS实现饼状图以及环形图，并且附带有源代码

一、饼状图

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);

}

HTML

二、环形图

CSS

.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