html - 使用 CSS 为重叠的 Div 形状着色

Question

我是编码新手，正在尝试使这些 div 的交叉部分具有不同的颜色。我最初的尝试是创建第三个带有边框规范的 div 来模仿形状，但我无法使其完美匹配。下面是标记和样式，描述了我想要的红色正方形和蓝色圆圈重叠，重叠部分为紫色。

.box {
    width: 200px;
    height: 200px;
    background: red;
    position: relative;
    top: 40px;
    left: -35px;
}

.shape {
    width: 250px;
    height: 250px;
    background: navy;
    border-radius: 50%;
    position: absolute;
    left: 50px;
    top: 50px;
}

#top-left {
    width: 148px;
    height: 147px;
    background: purple;
    position: absolute;
    top: 1px;
    left:2px;
    border-top-left-radius: 118px;
}

<div class="box">
    <div class="shape">
        <div id="top-left"></div>
    </div>
</div>

有没有更简单的方法来做到这一点，或者有什么方法可以使左上边框完美圆润？

Answer 1

添加overflow: hidden;到.shape。位置 top-left 相对。完成!

.box {
    width: 200px;
    height: 200px;
    background: red;
    position: relative;
    top: 40px;
}
.shape {
    width: 250px;
    height: 250px;
    background: navy;
    border-radius: 50%;
    position: absolute;
    left: 75px;
    top: 50px;
    overflow: hidden;
}

#top-left {
    width: 150px;
    height: 150px;
    background: purple;
    position: relative;
    left: -25px;
}

<div class="box">
<div class="shape">
   <div id="top-left"></div>
</div>
</div>

输出: