css3 draw semicircle_html/css_WEB-ITnose

border-radius The method of making a semicircle is the same as making a circle, except that the width of the element and the direction of the rounded corner must be consistent. With different width and height ratios, as well as the direction of the rounded corner, you can make an upper semicircle, Lower semicircle, left semicircle and right semicircle effects. For example:
.semicircle {
                                                                                                                                                               50px;
border-radius: 50px 50px 0 0;/*The corner radius is the value of the height*/
}
.right {
height: 100px;/*The height is 2 times the width */
       width: 50px; *The width is 2 times the height*/
height: 50px;
border-radius: 0 0 50px 50px;/*The fillet radius is the value of the height*/
}
.left {
width: 50px;
height: 100px;/*The height is 2 times the width*/
border-radius: 50px 0 0 50px;/*The fillet radius is the value of the width*/
}

The effect is shown in Figure 3-35.



There are two tips for making a semicircle with border-radius:

To make an upper semicircle or a lower semicircle, the width value of the element is twice the height value, and the corners are rounded The radius value is the height value of the element;

makes a left semicircle or a right semicircle. The height value of the element is twice the width value, and the fillet radius value is the width value of the element.