css小点心

本文由做者邹欣华受权网易云社区发布。

有一个在邮件中用饼图直观地显示用户的各项消费比例的需求。邮箱中不能用js，纯css实现饼图，只能经过后端模版渲染数据，因此数据越少越简单越好。

想到css3的transform的rotate属性，rotate经过对指定的角度参数对元素指定一个角度的旋转。圆形的话用border-radius就能够实现，可是怎样经过旋转生成饼图。一个完整的圆不论怎样旋转都还只是一个圆，达不到要让每个模块按比例显示出来的效果。可是能够用多个扇形组合成一个圆，而后经过旋转的角度差，显示各自的比例。旋转之后显示须要的部分，不须要的部分就要隐藏起来。又联想到了css2的clip属性。能够利用clip裁剪出想要的部分，rotate旋转出百分占比的区域，其他的部分经过透明遮罩隐藏起来，border-radius属性实现圆形效果。

第一步获得一个小扇形。

裁剪圆的右边一半（clip:rect(0px,100px,200px,0px)），而且将右边半圆旋转20度（transform:rotate(20deg)）。

第二步，接着生成多个扇形合成一个完整的圆。由于需求中不肯定哪些内容须要展现，可是知道各自的数量以及总数，就能够计算出各自的占比，遮罩旋转的角度是前面全部扇形旋转角度的累加，扇形旋转的角度就是其百分比乘以360得出。

这里须要提早在css中把全部可能出现的种类及对应的颜色定义好。clip属性只能在设置了”position:absolute”或者”position:fixed”属性起做用

透明遮罩的公共样式

.hold {

position:absolute;

width:200px;

height:200px;

clip:rect(0px,200px,200px,100px);

}

扇形区域的公共样式

.pie {

position:absolute;

width:200px;

height:200px;

clip:rect(0px,100px,200px,0px);

border-radius:100px;

}

第三步，将全部的扇形渲染完成就是一个完整的饼图了。由于数据是动态的因此须要特殊处理一下占比大于50%的状况。若是第一个扇形占比大于50%，须要旋转180度以后，再写一个一样颜色的扇形区域接着以前的旋转剩余的角度。旋转角度经过后端模版计算出来，因此经过style来定义。

<div id="NVS" >

<div style="transform:rotate(180deg);"></div>

</div>

<div id="NVS" style="transform:rotate(180deg);">

<div style="transform:rotate(19.8deg);"></div>

</div>

还有一种特殊状况是扇形旋转的总角度和大于180，可是该扇形区域还有一部分未显示，须要将该部分旋转180减去前面部分的总和再写一个一样颜色的扇形区域接着以前的旋转该部分剩余的角度。

<div id="NLB" >

<div style="transform:rotate(60deg);"></div>

</div>

<div id="CDN" style="transform:rotate(60deg);">

<div style="transform:rotate(120deg);"></div>

</div>

<div id="CDN" style="transform:rotate(180deg);">

<div style="transform:rotate(90deg);"></div>

</div>

最后的结果图。

第一次接触到邮件中的需求，后来发现邮箱客户端css3的transform特性不支持，最后只能将饼图转换成图片放在页面中。而且考虑要outlook等邮箱客户端内核的不一样，最好用table布局，而且图片要在页面中用img标签引入，譬如margin这样的属性会失效等。

以上只是个人思路与作法，欢迎各路大神支招改进。
附上各邮箱对css的支持状况：https://www.campaignmonitor.com/css/

免费领取验证码、内容安全、短信发送、直播点播体验包及云服务器等套餐

更多网易技术、产品、运营经验分享请访问网易云社区。

相关文章：
【推荐】 Obfuscator-llvm源码分析