css 实现三角形

1. border 挤压生成三角形

.triangle {
    width: 0px;
    height: 0px;
    border: 100px solid;
    border-color: orangered skyblue gold yellowgreen;
}

2. 线性渐变生成三角形

.triangle {
     width: 100px;
     height: 100px;
     background-repeat: no-repeat;
     outline: 1px solid skyblue;
     background-image: linear-gradient(45deg, orangered 50%, rgba(255, 255, 255, 0) 50%);
}

3. clip-path 裁剪三角形

.triangle3 {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      clip-path: polygon(0 0, 0% 100%, 100% 100%);
}

css 实现 八等分圆

思路是

1. 将一个圆分成两个半圆
2. 每一个半圆内部，在用半圆旋转遮盖生成等分圆
3. 两个半圆合并生成一个整圆 核心代码

.circle-left {
            width: 100px;
            height: 200px;
            position: absolute;
            right: 0;
            transform-origin: 0% 50%; // 要点：使用 transform-origin 改变圆的中心
            border-radius: 0px 100px 100px 0px;
        }
        .circle-right {
            width: 100px;
            height: 200px;
            position: absolute;
            right: 0;
            transform-origin: 100% 50%;
            border-radius: 100px 0px 0px 100px;
        }
        .circle {
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background-color: yellowgreen;
            position: relative; // 绝对定位
        }
        .left {
            position: absolute;
            right: 0px;
            width: 100px;
            height: 200px;
            overflow: hidden; // 避免扇形溢出
        }
        .right {
            position: absolute;
            right: 100px;
            width: 100px;
            height: 200px;
            overflow: hidden;

        }
     ```


[代码片段](https://code.juejin.cn/pen/7175403348508540983)


# 参考链接
1 https://juejin.cn/post/7075884138900750372
2 https://juejin.cn/post/6844904198375473165
3 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function