小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

绘制

在我们的学习过程中，可能会遇到比较有趣的图案，比如月亮、扇形、圆环等，这些都可以通过圆形进行变换得到。虽然我们在实即项目中用到的比较少，但是如果有类似图案需求的时候我们可以作为一种参考。

容器

<div class="circular"></div>

绘制类圆形我们准备一个div元素足以，接下来就是它的变身时刻。

样式

这里圆形和椭圆都很常见就不赘述了，主要讲一讲月亮、扇形、圆环是怎么绘制的

月亮

月亮的主要是通过box-shadow属性实现的，你可以改变--sw值得大小来改变月亮得大小。另外你也可以通过伪元素来实现这个效果。

.circular{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    --sw:30px;
    box-shadow: var(--sw) var(--sw) 0 0 red;
}

扇形

通过上篇文章（一）巧用CSS3之三角形我们知道三角形是如何绘制都，扇形就是在此基础上加border-radius: 50%;，方向根据与三角形同步，如下：

.circular{
    width: 0;
    height: 0;
    --bw:100px;
    border-left:var(--bw) solid transparent;
    border-right:var(--bw) solid transparent;
    border-top:calc(var(--bw) * 2) solid red;
    border-radius: 50%;
}

圆环

圆环得实现就非常简单了，如下：

.circular{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 20px solid red;
}

总结

这些类圆形得绘制都用到了border-radius: 50%;，看着都是规则得形状，如果是不规则的又该怎么做呢？下面的文章会提到。

想了解其他动画效果，请前往《有趣的动画》 专栏，希望对你有所帮助。