如何让子div适配带圆角的父div？CSS布局问题求助

想要实现一个圆形被等分为5个彩色扇形的布局，当前使用Flex布局实现后，子div溢出了父div，请问如何通过CSS让子元素适配父元素，或者有更好的方法还原该布局？

当前代码如下：

CSS代码 #

.blue {
    background-color: blue;
    flex: 1;
}

.orange {
    background-color: orange;
    flex: 1;
}

.yellow {
    background-color: yellow;
    flex: 1;
}

.green {
    background-color: green;
    flex: 1;
}

.red {
    background-color: red;
    flex: 1;
}

.container {
    background: #cfcfcf;
    width: 128px;
    height: 128px;
    border-radius: 64px;
    border: 2px solid #000;
    display: flex;
}

HTML代码 #

<html>
<body>
    <div class="container">
        <div class="orange">&nbsp;</div>
        <div class="yellow">&nbsp;</div>
        <div class="blue">&nbsp;</div>
        <div class="green">&nbsp;</div>
        <div class="red">&nbsp;</div>
    </div>
</body>
</html>

Flex布局是线性排列模型，无法直接实现扇形分割的圆形效果，推荐以下两种更合适的方案：

方案一：绝对定位+clip-path+旋转（支持单个扇形交互） #

通过裁剪和旋转实现独立的扇形元素，适合需要单独控制每个扇形样式或交互的场景：

修改后代码 #

CSS

.container {
    position: relative;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    border: 2px solid #000;
    overflow: hidden;
}

.container > div {
    position: absolute;
    width: 100%;
    height: 100%;
    /* 裁剪出以圆心为顶点的扇形 */
    clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
}

.orange {
    background-color: orange;
    transform: rotate(0deg);
}

.yellow {
    background-color: yellow;
    transform: rotate(72deg);
}

.blue {
    background-color: blue;
    transform: rotate(144deg);
}

.green {
    background-color: green;
    transform: rotate(216deg);
}

.red {
    background-color: red;
    transform: rotate(288deg);
}

HTML

<html>
<body>
    <div class="container">
        <div class="orange"></div>
        <div class="yellow"></div>
        <div class="blue"></div>
        <div class="green"></div>
        <div class="red"></div>
    </div>
</body>
</html>

说明：每个扇形通过clip-path定义形状，再旋转72°（360°/5），刚好填满整个圆形，父容器的overflow: hidden确保裁剪后的元素不会溢出。

方案二：CSS圆锥渐变（简洁高效） #

如果不需要单独控制每个扇形，用圆锥渐变可以一行代码完成布局，代码最简洁：

修改后代码 #

CSS

.container {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    border: 2px solid #000;
    background: conic-gradient(
        orange 0deg 72deg,
        yellow 72deg 144deg,
        blue 144deg 216deg,
        green 216deg 288deg,
        red 288deg 360deg
    );
}

HTML

<html>
<body>
    <div class="container"></div>
</body>
</html>

说明：conic-gradient按角度直接划分颜色区域，自动填充整个圆形，无需额外子元素。

内容的提问来源于stack exchange，提问作者MANN PRAJAPATI