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/

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

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

相关文章：
【推荐】 Android View部分消失效果实现
【推荐】 深入浅出“跨视图数据粒度计算”--1、理解数据的粒度