1、使用border-radius属性画扇形
示例：
<html>
<head>
<style type="text/css">
div{
border-radius:80px 0 0;
width: 80px;
height: 80px;
background: #666;
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果图：
实现原理：左上角是圆角，其余三个角都是直角：左上角的值为宽和高一样的值，其他三个角的值不变（等于0）。
2、矩形+半圆相切
基本思路是：左边的半圆旋转与右边的矩形相切。
至于细节：
1、半圆的由来：可以rect裁剪只显示圆的左边部分
2、同理，矩形也通过rect裁剪只显示右边部分，同时没有背景色。这样一个矩形里视觉上只会显示半圆与矩形相切的部分
然后剩下的完善同样三个标签旋转一定角度。
3、渐变
我们先试试渐变实现半圆：
background:
// 渐变角度0 透明和黑色各占一半
linear-gradient(0deg,transparent 50%,black 50%);
同样我们使用半圆相切的方式，3个半圆旋转一定角度得到一个扇形
旋转一定角度 取其下半部分
你可能会想6个扇形是不是渐变6次即可？
当然不是，当颜色占壁超过一半后，剩下的颜色会被覆盖。所以最多只能形成3个扇形得到的半圆（多的那部分裁剪掉），那剩下的一半圆呢？
使用伪类同样的方式生成即可~
这个方法不太容易想到，其实渐变这个属性有很多强大的功能，许多onediv效果实现渐变属性贡献了不少力量，目前我对渐变的属性也尚处于初研究阶段，不得不的吐槽一下渐变属性确实不太好掌握（在PS可视化界面里拉渐变我都拉不好的说..），但是一旦掌握了又将踏入一个新的世界）
更多web前端开发知识，请查阅 HTML中文网 ！！
