css3实现上下半圆

html-css021

css3实现上下半圆,第1张

border-radius是可以实现上下左右半圆的,但是如果在整圆里放下半圆,在圆里的位置不太好控制,按照上下左右一个一个介绍

看这样很容易就出啦上下半圆了

如果想在一个整圆中分别作出上下半圆不同颜色,而且圆中带字的话,如图:

恐怕上面的办法就不好使了,做这种双色圆的方法如下:

我用四个圆做对比,结果如下:

方法一:border

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

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

方法二:矩形+半圆相切

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

至于细节: 

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

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

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