Home > Article > Web Front-end > How to draw a fan shape in css3
How to draw a fan shape in css3
- 藏色散人Original
- 2021-01-13 10:37:395249browse
How to draw a fan shape in css3: First create an HTML sample file; then add the border-radius attribute to the specified div; finally set the composite attribute such as "border-radius:80px 0 0;".
The operating environment of this tutorial: windows7 system, HTML5&&CSS3 version, Dell G3 computer.
css has become more and more powerful. You can use it to draw various simple shapes, which can be used to replace picture display. This sharing is mainly used to draw circles and sectors. Let’s take a look at how to use them. css draws fan shape.
Draw a fan shape through css:
<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>Rendering:
Implementation principle: the upper left corner is rounded, and the other three corners are rounded It is a right angle: 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).
The border-radius attribute is a composite attribute that can specify up to four border -*- radius attributes
Syntax:
border-radius: 1-4 length|% / 1-4 length|%;
The order of the four values for each radius Is: upper left corner, upper right corner, lower right corner, lower left corner. If the lower left corner is omitted, the upper right corner is the same. If the lower right corner is omitted, the upper left corner is the same. If the upper right corner is omitted, the upper left corner is the same.
Attribute value:
length defines the shape of the curve.
% Use % to define the shape of the corners.
Recommended: css video tutorial
The above is the detailed content of How to draw a fan shape in css3. For more information, please follow other related articles on the PHP Chinese website!