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

输出：