admin 管理员组

文章数量: 887017

纯css画饼状图

一、饼图

<div class="pie"></div>.pie {width:100px;height:100px;border-radius:50%;background: yellowgreen;background-image: linear-gradient(toright,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);
}

二、环形图

<div class="loading"><div class="left"></div><div class="right"></div><div class="progress">85%</div>
</div>.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);
}

demo：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.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;transform:var(--leftRotate);}.right:after {transform-origin: left center;/* transform: rotateZ(45deg); */transform: var(--rightRotate);}</style>
</head><body><div id="app"><div class="loading"><div class="left" :style="{'--leftRotate': 'rotateZ(0deg)'}"></div><div class="right" :style="{'--rightRotate': 'rotateZ(90deg)'}"></div><div class="progress">85%</div></div><div class="loading"><!-- if(x>50){rightRotate=0leftRotate=3.6*x}else{rightRotate=(x-50)*3.6leftRotate=180} --><div class="left" :style="{'--leftRotate': 'rotateZ(90deg)'}"></div><div class="right" :style="{'--rightRotate': 'rotateZ(180deg)'}"></div><div class="progress">85%</div></div></div><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">var app = new Vue({el: "#app",data: {},created() {console.log(0.85*360)},})</script>
</body></html>

本文标签： 纯css画饼状图

版权声明：本文标题：纯css画饼状图 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732357087h1534740.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。