Home > Article > Web Front-end > How to set a sector area in css
How to set a sector area in css
- 青灯夜游Original
- 2021-04-06 17:01:003659browse
In CSS, you can use the border-radius attribute to set a sector area. The border-radius attribute can set the rounded corners of the four corners of the border; you only need to set the value of one corner of the border-radius attribute to be the same as the width and height, and set the values of the other corners to "0" to achieve a simple fan shape.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css setting sector area
In css, you can use the border-radius attribute to draw a sector.
Implementation principle: The upper left corner is a rounded corner, and the other three corners are right angles: the value of the upper left corner is the same as the width and height, and the values of the other three corners remain unchanged (equal to 0).
Code example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
border-radius: 80px 0 0;
width: 80px;
height: 80px;
background: #666;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Effect picture:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to set a sector area in css. For more information, please follow other related articles on the PHP Chinese website!