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

前端之家收集整理的这篇文章主要介绍了HTML – 如何使圆圈只出现在具有不同颜色的某些div中?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
基本上我会尽量保持这个简单.

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

我已经在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 class="header-wrapper">
  <div class="header"></div>
  <div class="header"></div>
</div>

<div class="circle"></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 class="header-wrapper">
  <div class="header">
    <div class="circle top pink"></div>
  </div>
  <div class="header">
    <div class="circle yellow"></div>
  </div>
</div>
原文链接:https://www.f2er.com/html/225553.html

猜你在找的HTML相关文章