最近做练习，有人问到了我这个问题：“圆环图怎么做？”；之前一直没写过，正好这次有机会自己写个demo试着看下。 用到的样式技术全是基于Css3，所以低端浏览器可以无视了。

首先说下思路：

  • 采用边框及圆角实现环形
  • 用变换角度来控制进度
  • 用裁切及遮罩控制显示

那我们开始吧。

先写结构：

 
<div class="chart">
	<div class="chart-progress"></div>
	<div class="chart-text">
		<strong>50</strong>
		<span>%</span>
	</div>
</div>

整体图我们放在一个chart容器内。progress我们主要做进度使用，text放文本。

CSS:

.chart {
	width:100px;
	height:100px;
	float:left;
	position:relative;
	line-height:100px;
	text-align:center;
	margin:0 20px;
}
.chart::before {
	content:"";
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	border:10px solid #ccc;
	border-radius:50%;
	z-index:1;
}
.chart::after {
	content:"";
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	border:10px solid #999;
	border-radius:50%;
	clip:rect(0,auto,auto,50px);
	z-index:2;
}
.chart .chart-progress {
	position: absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	border:10px solid #999;
	border-radius:50%;
	clip:rect(0,auto,auto,50px);
	z-index:3;
}

我们在chart内插入两个伪元素，一个做背景使用，就是浅色的圆环，一个做进度使用即深色背景。然后将深色背景裁切成半圆，那么 也就是50%进度的效果就出来了。这个是最容易的。

在这里将圆分成360，那么1%就是需要旋转3.6°，30%的话就是108°，然后通过设置变换旋转角度控制进度。

问题的关键在于判断是否大于50%，大于50的话，将progress的背景设为深色作为补足超出50%的进度。然后设置旋转角度，以(进度-50)* 3.6为值。 如果小于的话，就需要将浅色背景增大来遮罩50%多余当前的进度。这里就需要把prosress的背景设置为浅色背景，然后设置旋转角度，以进度 * 3.6为值。

下面是预览效果：

50 %
30 %
80 %