How does CSS draw a semicircle

This article mainly introduces CSS how to draw a semicircle, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Source code:

W3C-# semi-circle {width: 200px; height: 100px; background-color: red; border-radius:100px 100px 00; / * Top left, top right, bottom right, bottom left * /}

The above example is to draw an upper semicircle, if you want to draw a semicircle in other directions, you only need to modify the border-radius code.

Top semicircle: border-radius:100px 100px 00

Lower semicircle: border-radius:0 0 100px 100px

Left semicircle: border-radius:100px 00 100px

Right semicircle: border-radius:0 100px 100px 0

Thank you for reading this article carefully. I hope the article "how to draw a semicircle in CSS" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!