使用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>

输出