Method: 1. Add the "width: width value; height: height value;" style to the element, and set the element to a rectangle with a width half the height; 2. Add a "border-radius: 0 rectangle" to the element Width value rectangle width value 0;" style, set rounded corners to the rectangle, and then set the rectangle to the right semicircle style.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to draw a right semicircle in css
In css, you can first create a rectangular element whose width is half the height. The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 50px;
height: 100px;
background-color:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Output result:
Then use the border-radius attribute to set the rounded corner style on the right, and set the rounded corner value to be as large as the width value. The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 50px;
height: 100px;
background-color:red;
border-radius: 0 50px 50px 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to draw a right semicircle in css. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
