Today, the interviewer asked a question about how to draw a circle and draw a trisector sector in the circle. The first reaction is to use trigonometric function, but I have forgotten trigonometric function for many years after graduation, and I do not use it in my daily development. After coming back, I did not find a better way to use it, so I thought about it and found a simpler way.

  • So basically we’re going to draw a 90-degree sector, and we know we only need to change one radian, but to draw a 120-degree sector we might have to use trigonometry and draw a parallelogram to capture part of that.
  • The idea that I’m using here is to draw two 90-degree sectors, and then the first one stays the same, and the second one rotates around the center of the circle by the corresponding Angle, and you get the desired effect

It may not be elegant, but it does complete the interviewer’s question and goes straight to the code without saying a word.

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>

<body>
    <div style="width: 200px; height: 200px; border-radius: 50%; background-color: pink; position: relative;">
        <! -- First one -->
        <div
            style="width: 100px; height: 100px; background-color: red; border-radius: 100px 0 0 0; left: 0; top: 0; position: absolute;">
        </div>
        <div
            style="width: 100px; height: 100px; background-color: red; border-radius: 100px 0 0 0; left: 0; top: 0; position: absolute; transform: rotate(30deg); transform-origin: right bottom;">
        </div>
        <! -- Second -->
        <div
            style="width: 100px; height: 100px; background-color: yellow; border-radius: 100px 0 0 0; left: 0; top: 0; position: absolute; transform: rotate(120deg); transform-origin: right bottom;">
        </div>
        <div
            style="width: 100px; height: 100px; background-color: yellow; border-radius: 100px 0 0 0; left: 0; top: 0; position: absolute; transform: rotate(150deg); transform-origin: right bottom;">
        </div>
        <! -- The third -->
        <div
            style="width: 100px; height: 100px; background-color: green; border-radius: 100px 0 0 0; left: 0; top: 0; position: absolute; transform: rotate(240deg); transform-origin: right bottom;">
        </div>
        <div
            style="width: 100px; height: 100px; background-color: green; border-radius: 100px 0 0 0; left: 0; top: 0; position: absolute; transform: rotate(270deg); transform-origin: right bottom;">
        </div>
    </div>
</body>

</html>
Copy the code

rendering