html彩色重叠,html – 使用CSS着色重叠Div形状

我是编码的新手,我试图让这些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;

}

有没有更简单的方法来做到这一点,或者是一种让左上边框完美圆润的方法？