然后再次在这个矩形区域里面定义一个或者多个区域，同样给边框上个颜色，然后用border-radius:50%；这样就会让此矩形区域变换为圆形，依次在里面添加一个或者多个即可；
最后在你定义的圆形区域里面打上文字，如果那里不合适，用css控制一下区域或者文字；
希望我的回答能帮到你；
border-radius是可以实现上下左右半圆的，但是如果在整圆里放下半圆，在圆里的位置不太好控制，按照上下左右一个一个介绍
看这样很容易就出啦上下半圆了
如果想在一个整圆中分别作出上下半圆不同颜色，而且圆中带字的话，如图：
恐怕上面的办法就不好使了，做这种双色圆的方法如下：
我用四个圆做对比，结果如下：
data:text/html, <div style="width: 10vwheight: 10vwborder-radius:50%background-color: rgb(250, 192, 192)"></div>直接在360,google浏览器输入就可以看到效果。
