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

概述我是编码的新手,我试图让这些div的交叉部分变成不同的颜色.我最初的尝试是创建一个带边框规格的第三个div来模仿形状,但我不能让它完美匹配.下面是标记和样式,描述了我想要的红色正方形和蓝色圆圈重叠,重叠部分为紫色. .box { width: 200px; height: 200px; background: red; position: relative; 我是编码的新手,我试图让这些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 >    <div >        <div ID="top-left"></div>    </div></div>

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

解决方法 添加溢出：隐藏;塑造.相对位置左上角.完成！

.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 ><div >   <div ID="top-left"></div></div></div>

输出：

总结

以上是内存溢出为你收集整理的html – 使用CSS着色重叠Div形状全部内容，希望文章能够帮你解决html – 使用CSS着色重叠Div形状所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。