我是编码新手,正在尝试使这些 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>
有没有更简单的方法来做到这一点,或者有什么方法可以使左上边框完美圆润?
最佳答案
添加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>
输出:
关于html - 使用 CSS 为重叠的 Div 形状着色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28143723/