css画扇形的几种实现方式

html-css030

css画扇形的几种实现方式,第1张

方法一:border

我们知道利用border+宽高:0 可以实现如下效果 (假设圆的半径是100px)

如果要实现扇形在此基础上圆角一下即可,同时设置某一方颜色透明即可实现”某一块扇形”的视觉效果

方法二:矩形+半圆相切

基本思路是:左边的半圆旋转与右边的矩形相切。

至于细节: 

1.半圆的由来:可以rect裁剪只显示圆的左边部分 

2.同理,矩形也通过rect裁剪只显示右边部分,同时没有背景色。这样一个矩形里视觉上只会显示半圆与矩形相切的部分

然后剩下的完善同样三个标签旋转一定角度。

1、首先新建一个html空白文档,取名字叫做css3动画,保存一下。

2、然后写html结构,只需要一个div元素即可,class名字叫做img

3、设置其边框为不同的颜色,边框宽度设置成100px。

4、因为是圆环,所以我们用到了css3的圆角效果,设置圆角为50%,也就是border-radius:50%,看一下效果。

5、接下来就是关键的步骤了,也就是添加动画效果。输入以下代码

6、来看一下最后的效果,还是不错的。