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:003680browse

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.

How to set a sector area in css

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:

How to set a sector area in css

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

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