HTML – 如何使圆圈只出现在具有不同颜色的某些div中？

概述基本上我会尽量保持这个简单. 我试图做这样的事情(忽略任何设计方面,除了我说的)： 我已经在JSFiddle here.上开始了 .header-wrapper { display: flex; flex-direction: column; align-items: flex-end;}.header { background-color: #0091cc; border 基本上我会尽量保持这个简单.

我试图做这样的事情(忽略任何设计方面,除了我说的)：

我已经在Jsfiddle here.上开始了

.header-wrapper {  display: flex;  flex-direction: column;  align-items: flex-end;}.header {  background-color: #0091cc;  border-radius: 20px;  height: 100px;  wIDth: 90%;  margin-bottom: 20px;}.circle {  background-color: pink;  height: 400px;  wIDth: 400px;  border-radius: 50%;  position: absolute;  top: -100px;  left: -100px;}

<div >  <div ></div>  <div ></div></div><div ></div>

基本上问题是我看不出圆圈通过两个矩形连接并且有两种不同的颜色,就像在图像中一样.在仍然切出圆圈的其余部分时,会从矩形中溢出.

我希望这是有道理的.

提前致谢.

解决方法 我不得不改变你的标记.为了让旧标记起作用,它本来就太黑了.基本上我为每个标题指定了一个圆圈,并将溢出设置为隐藏在标题上.然后我玩top属性来决定我要显示的圆圈的哪个部分.左边的边框上出现了轻微的蓝色,但我确信不会花很长时间才弄清楚原因.

.header-wrapper {  display: flex;  flex-direction: column;  align-items: flex-end;}.header {  background-color: #0091cc;  border-radius: 20px;  height: 100px;  wIDth: 90%;  margin-bottom: 20px;  position: relative;  overflow: hIDden;}.circle {  position: absolute;  top: -100px;  left: -100px;  height: 200px;  wIDth: 200px;  border-radius: 200px;  background-color: #fff;}.circle.top {  top: 0;}.yellow {  background-color: yellow;  }.pink {  background-color: pink;  }

<div >  <div >    <div ></div>  </div>  <div >    <div ></div>  </div></div>

总结

以上是内存溢出为你收集整理的HTML – 如何使圆圈只出现在具有不同颜色的某些div中？全部内容，希望文章能够帮你解决HTML – 如何使圆圈只出现在具有不同颜色的某些div中？所遇到的程序开发问题。

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