CSS achieves any angle circle

 

 

Reference link:  css making rings - Nuggets

The main idea: Use  the clip-path property of CSS for clipping 

clip-path For details, refer to  polygon() - MDN (mozilla.org) 

The principle of this attribute is: use polygons to clip graphics.

According to the specific code, to analyze

clip-path: polygon(50% 0%, 100% 50%,50% 100%,0% 50%);

 According to the code, we can get 4 sets of data, which are: [The yellow part is the X axis, and the green part is the Y axis]

1.  50% 0%
2.  100% 50% 
3.  50% 100%
4.  0% 50%

Tip: There are N sets of data  in the polygon brackets , and the polygon has N vertices

This way we get a rhombus

 

 According to this principle, you can get a ring with any angle by cutting the ring.

---

body part

 Write the JS part first, to control the percentage [CSS variable]

        function get(angle, flag = true) {

            if (angle <= 45) {
                if (flag) {
                    return ((Math.tan(angle * 2 * Math.PI / 360) * 0.5 + 0.5) * 100).toFixed(2) + "%"
                }
                return ((Math.tan(angle * 2 * Math.PI / 360) * 0.5) * 100).toFixed(2) + "%"
            }

            if (angle <= 135) {
                // 首先将 145 分成2段进行处理
                if (angle <= 90) {
                    // 45 - 90
                    return get(angle - 45, false)
                } else {
                    // 90 - 145  
                    return get(angle - 90)
                }
            }

            if (angle <= 225) {
                // 与 135 同理,也分成 2 段
                if (angle <= 180) {
                    let v1 = get(angle - 135, false)
                    let result = (100 - parseFloat(v1.substring(0, v1.length - 4))).toFixed(2)
                    return result + "%"
                } else {
                    let v2 = get(angle - 180)
                    let result = (100 - parseFloat(v2.substring(0, v2.length - 4))).toFixed(2)
                    return result + "%"
                }
            }

            if (angle <= 315) {
                if (angle <= 225) {
                    let v1 = get(angle - 225, false)
                    let result = (100 - parseFloat(v1.substring(0, v1.length - 4))).toFixed(2)
                    return result + "%"
                } else {
                    let v2 = get(angle - 270)
                    let result = (100 - parseFloat(v2.substring(0, v2.length - 4))).toFixed(2)
                    return result + "%"
                }
            }

            if (angle <= 360) {
                return get(angle - 315, false)
            }

            // 当以上条件都不满足,参数不正确
            throw new Error("参数必须为 0 - 360")
        }

Style part: [structural part]

<div class="container">
        <div class="circle cirque360" data-angle="0"></div>
        <div class="rect"></div>
        <div class="backup"></div>
    </div>

:root {
            --cirque-percent: 0;
        }

        .container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 500px;
            height: 500px;
            margin: 100px auto;
            background-color: #c5e1a5;
        }

        .rect {
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
            width: 100px;
            height: 100px;
            background-color: yellow;
            z-index: 0;
        }

        .backup {
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
            width: 100px;
            height: 100px;
            background-color: green;
            border-radius: 50%;
            z-index: 1;
        }

        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: blue;
            border: 10px solid #9c27b0;

            box-sizing: border-box;
            z-index: 2;
        }

        .cirque45 {
            /* 剪切圆环 */
            clip-path: polygon(50% 0, 50% 50%, var(--cirque-percent) 0);
        }

        .cirque135 {
            clip-path: polygon(50% 0, 50% 50%, 100% var(--cirque-percent), 100% 0);
        }

        .cirque225 {
            clip-path: polygon(50% 0, 50% 50%, var(--cirque-percent) 100%, 100% 100%, 100% 0);
        }

        .cirque315 {
            clip-path: polygon(50% 0, 50% 50%, 0% var(--cirque-percent), 0% 100%, 100% 100%, 100% 0%);
        }

        .cirque360 {
            clip-path: polygon(50% 0, 50% 50%, var(--cirque-percent) 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
        }

---

Focus on modifying this

 cirque360 should be changed to cirque45 cirque135 cirque225 cirque360 four 

For example: cirque45 , the input angle cannot be greater than 45. cirque135, the input angle cannot be greater than 135

Now open your browser:

Console changes CSS variables

document.documentElement.style.setProperty('--cirque-percent', get(120));

operation result: