纯css实现三等分饼图

纯css实现三等分饼图_第1张图片

实现原理,先绘制一个圆,然后把圆分成两份,在绘制一个菱形,最下面的角是120°,这样就可以实现三等分啦

关键代码是一个css很少见的属性clip-path

clip-path: polygon(24rem 36rem, 48rem 18rem, 24rem 0, 0 18rem);

(polygon值是根据勾股定理算出来)



	
		
		纯css实现三等分饼图
		
	
	
		

以上代码引入一下jquery后可以直接使用噢  

你可能感兴趣的:(css,前端,javascript)