Using the CSS3 appeased diagram

CSS3 Gradient Introduction Reference address:

Http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html

http://www.zhangxinxu.com/wordpress/?p=3639

：

Html:

<div class= "Colorwheel" >    <div class= "Piece" ></div></div>

Css:

. colorwheel {position:relative;  Width:16em;  Height:16em; Background:linear-gradient (36deg, #7c1 42%, Transparent 42%), Linear-gradient (72deg, #999 75.48%, transparent 75.48%), Linear-gradient ( -36deg, #479bf6 42%, Transparent 42%) 100% 0,linear-gradient ( -72deg, yellow 75.48%, transparent 75.48%) 100% 0,linear-gradient ( -36deg, Transparent 58%, #643 58%) 0 100%,linear-gradient ( -72deg, Transparent 24.52%, #8a1 24.52%) 0 100%,linear-gradient (36deg, Transparent 58%, #90a 42%) 100% 100%,linear-gradient (72deg,transparent 24.52%, #099 24.52%)  100% 100%, #43a1cd linear-gradient (#ba3e2e, #ba3e2e) 50% 0;  Background-repeat:no-repeat;  background-size:50% 50%;  border:1px solid #ccc;  border-radius:50%; margin:30px;}.  piece{Position:absolute;  left:8%;  Top:-2.6%;  width:100%;  height:100%; Background:linear-gradient ( -36deg, #5454E3 42%, Transparent 42%)  100% 0;  Background-repeat:no-repeat;  background-size:50% 50%; border-radius:50%;}

　　

set linear-gradient value to background multiple times, have seen Halo ... How exactly are those angles and percentages set? and how did that pie get split? Take a look at the following analysis: Take the first liear-gradient setting in the background as an example: Background:linear-gradient (36deg, #ff0 42%, Transparent 42%), as follows:

　　

The first parameter is an angle, the circle is divided into 10 equal parts, then the angle is 360/10=36°, "degrees" is expressed in deg. The attribute value transparent is used in the color transition position in order to have a line of color sudden stop rather than a gradient. The percentage calculates the area of the entire area of the color, calculated as: 100*sin36/(sqrt (2) *cos9) Sin36 36 refers to the central angle angle of each color block is 36°, and 9 in COS9 is calculated by 45-36. if the center angle in each color block is α, the calculated area formula is converted to 100*sinα/(sqrt (2) *cos (45-α))

Formula Source:

The color of all points on the line perpendicular to the gradient. The vertical and gradient lines drawn from the vertices of the third quadrant are 0% lines, and the vertical line from the vertices of the first quadrant is 100%. Draw a straight line that passes through the origin, and is perpendicular to 0% lines and 100%, with the 0% line intersection of S, and the intersection of the 100% line as E, whichever is a little p in the rectangle, assuming this is on the boundary of the color change, from the point P to a straight line SE, the vertical point is I  , the ratio of SI to se is the proportion of the area divided by the dividing line of P point. More intuitive line diagram, in order to draw a circle is a square space, there is a very familiar feeling of wood ... Connect the ab point, and over point A is a straight-to-pi line at point D, the ad length is equal to the IS length. If the square side length is a, the OB length is a*sqrt (2)/2, The mathematical knowledge is available, the ∠moe=36°,∠eob=9° is oe=cos9*a*sqrt (2)/2; another, is=ad=sin36*a; then: is/sb=is/2oe=sin36/ (COS9*SQRT (2));

The formula for the proportion of the total square area of the area formed by the angle of α is: 100*sinα/(sqrt (2) *cos (45-α)) said such a large pile, originally only use this formula to calculate can be. Another example is to verify that the circle is divided into 6 equal points: each color block angle is: 360/6=60, each color block occupies the area of the square is: 100*sin60/(sqrt (2) *cos (45-60)), powerful JS has these commonly used mathematical formula algorithm, The parameters of Math.sin () and Math.Cos () are radians, converting the angle to radians: radians = angle *π/180, substituting the formula above, entering the calculation in the browser debug panel, 100*math.sin (60*math.pi/180)/( MATH.SQRT (2) *math.cos ( -15*math.pi/180)) = 63.4;

Html:

<div class= "Sixwheel" ></div>

Css:

. sixwheel{  Width:12rem;  Height:12rem;  margin-left:50px;  Background:linear-gradient (60deg, #93f 63.4%, Transparent 63.4%), Linear-gradient ( -60deg, #3f9 63.4%, Transparent 63.4 %) 100% 0, Linear-gradient ( -60deg, Transparent 36.6%, #f63 36.6%) 0 100%, Linear-gradient (60deg, Transparent 36.6%, #69c 36.6%, #69c) 100% 100%, #ff9 linear-gradient (#39f, #39f) 50% 0;
   
    background-repeat:no-repeat;  background-size:50% 50%;  border-radius:50%;}
   

：

　　

At this point, the pie is finished. How do you write that piece of cut? See the first pest. piece element, let this element and its parent element. Colorwheel have the same size, only the part of the element that needs to be divided to set the background color, set the same way. Control the position of the. piece, which can be segmented out of the effect. How to move the position so that the segmented block and the two sides of the same block distance is the focus. The length of the medium OA (transverse distance) and AC (longitudinal moving distance) are required.

　　

Shown, assume that the OM and on are surrounded by a sharp angle to the original region, CE and CF around the acute angle is the moving area, because the CE to OM distance equal to the CF to on distance, over the C point, as perpendicular to the OM line intersection point is B, as vertical and on the line intersection point is a, then cb=ca. Thus the ∠boc=∠coa is drawn. If ∠aob=36°, then ∠aoc=18°. Ac/oa=tan∠aoc. So,. Piece the scale of the horizontal moving position and the longitudinal movement position is tan (Α/2).

Article is by looking at the article dig deep into CSS Linear gradients, some of the pictures from this article, highly recommended to see the original!!!

Using the CSS3 appeased diagram