用 webkit 或者 firefox 看

原理如下

两个200x200 div(a,b)，各自横竖方向 clip:rect(…) 一半，旋转一个角度，注意重合的部分就是我们要的 pie。当然，还需要 border-radius:100% ，例外 b 应该嵌在 a 里面，这样溢出的部分不会显示。查看源文件：lesscss 或者 css

javascript 版本?

• 谱扫


• 郭爽


• 共扫

• 谱扫


• 郭爽


• 共扫

代码如下：

<ul class="gsPie">
<li data-pie="90"></li>
<li data-pie="180"></li>
<li data-pie="89"></li>
<li data-pie="300"></li>
</ul>
<style>@import url(http://guoshuang.com/labs/gspie.css)</style>
<script src="http://guoshuang.com/js/jquery-2.0.0.min.js"></script>
<script src="http://guoshuang.com/labs/gspie.js"></script>

简单说明

• data-pie 数量（百分比当然也可以）
• data-donut=”0.5” 圆心的百分比
• data-piesize=”0.5” 默认大小为 200x200px，0.5 表示一半大小
• label绕圈？嗯，这个不好处理。简单放在下边。