start
So let’s start with the idea. The first thing we have to do is we have to draw a sector, which must be cut out of a circle. So we just need a parallelogram, take the short side as the radius, draw a circle, take the part that coincides with the parallelogram, it is a fan, as shown below.
implementation
First of all, we only need the upper right half, which is actually a quarter circle, so we can draw a square div(yellow), and then draw a square circle(blue) that is twice as wide and absolutely positioned in the upper right corner, and then set the overflow of div to hidden.
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div { margin-top: 200px; margin-left: 200px; width: 100px; height: 100px; position: relative; background: yellow; overflow: hidden; } #circle { position: absolute; right: 0; top: 0; width: 200px; height: 200px; border-radius: 50%; background: blue; overflow: hidden; } </style> </head> <body> <div id="div"> <div id="circle"></div> </div> </body> </html>Copy the code
Then remove the yellow background of the div, and place an absolute parallelogram with the same radius and shorter edge in the circle to the upper right corner. Why do we need to locate in circle? Because circle is an arc, we can use overflow: hidden to truncate the long edge and form an arc. Div is a square, and truncation does not form a fan.
The method of forming a parallelogram is to use skew in transform. Basically, it is to rotate the x and y axes so that the square is stretched into a parallelogram.
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div { margin-top: 200px; margin-left: 200px; width: 100px; height: 100px; position: relative; overflow: hidden; } #circle { position: absolute; right: 0; top: 0; width: 200px; height: 200px; border-radius: 50%; background: blue; overflow: hidden; } #d1 { transform: skewX(135deg); transform-origin: 0 100%; position: absolute; right: 0; top: 0; background: red; width: 100px; height: 100px; } </style> </head> <body> <div id="div"> <div id="circle"> <div id="d1"></div> </div> </div> </body> </html>Copy the code
Remove the background color of the circle and you’re left with a red sector.
conclusion
Skew, skewY, rotateX, rotateY, and skewX will not be separated from the rotate operation. I tried it. It’s hard to understand. I hope I get out of it alive.