CSS Drawing fan pattern

This time to bring you CSS to draw a fan pattern, CSS drawing fan-shaped patterns of attention to what, the following is the actual case, together to see.

Reading this article requires basic mathematical knowledge: center angle, radian system, trigonometric function.

To achieve the following effects of painstaking effort:

Of course you can hug SVG ... Share here how to create a circular progress bar in pure Css in just three steps!

This is a 2 + 1 sandwich biscuit with a blue-green portion of jam. It is obvious that the biscuit is two rounded p, and we highlight how the jam was made:

, the large fan is made up of 6 small fan-shaped fans, each of which makes up 1/15 of the entire pie and a large fan of 6/15 of the whole pie. We only need to construct a fan-shaped unit, copy it 6 copies and then rotate the corresponding angle to join together.

How to structure a fan? To disguise with a triangle ...

How is the width height of the triangle calculated? Assuming that the circle radius $radius to 100px, the $count of the fraction is 15. The center angle of the small fan is 360DEG/15, the height of the triangle is 100px, and the width is 2 * 100px * TAN (360DEG/15/2). wherein the 360DEG/15/2 conversion radian system is PI/15 (PI = = 360DEG/2).

span {    width:0;    height:0;    Border: $radius solid transparent;    $borderWidth: Tan (pi ()/$count) * $radius;    Border-left-width: $borderWidth;    Border-right-width: $borderWidth;}

Students with poor maths should do their own science ...

Special treatment is required for a $count of 1 or 2, since Tan (PI) and tan (PI/2) are infinite values, and students who do not know are asked to study the tangent function image:

The relevant code (where $diameter = 2 * $radius round diameter):

span {    @if $count = = 1 {        width: $diameter;        Height: $diameter;    } @else if $count = = 2 {        width: $diameter;        Height: $radius;    } @else {        width:0;        height:0;        Border: $radius solid transparent;        $borderWidth: Tan (pi ()/$count) * $radius;        Border-left-width: $borderWidth;        Border-right-width: $borderWidth;    }}

Finally, copy and rotate the fan unit individually:

@for $index from 0 to $count {    Span:nth-child (#{$index + 1}) {        $transform: Translate ( -50%, 0) rotate (360deg/$cou NT/2 + 360deg * $index/$count);        $origin: if ($count = = = 2, bottom, center);        -webkit-transform: $transform;                Transform: $transform;        -webkit-transform-origin: $origin;                Transform-origin: $origin;    }}

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS3 of linear-gradient linear gradient using method

Hover in CSS to do mask flicker problem