Home >Web Front-end >CSS Tutorial >How to draw a right semicircle in css

How to draw a right semicircle in css

WBOY
WBOYOriginal
2021-12-06 11:46:143654browse

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.

How to draw a right semicircle in css

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:

How to draw a right semicircle in css

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:

How to draw a right semicircle in css

(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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn