纯css画饼状图

一、饼图
纯css画饼状图_第1张图片

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

二、环形图
纯css画饼状图_第2张图片

<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=0
					leftRotate=3.6*x
				}else{
					rightRotate=(x-50)*3.6
					leftRotate=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>

你可能感兴趣的:(笔记)