前端 环形统计_纯CSS实现饼图、环形图(百分比)

一、饼图

1149446-20180508160921410-1380185613.png

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

}

二、环形图

cdfc08180f70df71f5d25199af089a69.png

.loading {

margin: 100px auto;

width: 8em;

hei


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部