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

输出: