Method: 1. Place the circular element in the div container; 2. Set the height of the div to the radius length of the circle, and set the width of the div to the diameter length of the circle, so that the div is exactly Half a circle can be placed; 3. Add the "overflow: hidden" style to the div element to hide the half circle outside the div.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to hide half of a circle in css
In css, you can first put a circular element into a div, and then put The height of the div is set to the radius of the circle, and the width is set to the diameter of the circle.
At this time, you can use the overflow attribute to hide the circular part beyond the div.
The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.mask2{
width: 100px;
height: 50px;
overflow: hidden;
}
.round2{
width: 100px;
height: 100px;
background-color: cornflowerblue;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="mask2">
<div class="round2"></div>
</div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to hide half of a circle 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)
