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

输出：

使用 CSS 为重叠 Div 形状着色

Coloring Overlapping Div Shapes Using CSS

html

css

css-shapes