画任意角度的扇形

[nfssuzukaze]

今天在用 CSS 时遇到了一个需要画扇形的需求, 画完感觉这个技巧挺有用的, 于是记录下来

<!-- html 代码 -->
<div class='container'></div>

/* css 代码 */
:root {
    --box-length: 128px;
}

.container {
    height: var(--box-length);
    width: var(--box-length);
    background: lightblue;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}
.container::before,
.container::after {
    content: '';
    display: block;
    position: absolute;
    height: calc(2 * var(--box-length));
    width: var(--box-length);
    left: calc(-0.5 * var(--box-length));
    top: calc(-0.5 * var(--box-length));
    transform-origin: right center;
}
.container::before {
    background: lightyellow;
    transform: rotate(45deg);
}
.container::after {
    background: lightgreen;
    transform: rotate(-15deg);
}