Home > Web Front-end > CSS Tutorial > How to draw a fan shape in css3

How to draw a fan shape in css3

藏色散人
Release: 2022-12-30 11:11:40
Original
5390 people have browsed it

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;".

How to draw a fan shape in css3

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>
Copy after login

Rendering:

How to draw a fan shape in css3

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|%;
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template