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

时间:2016-08-22 15:33:14

标签: html css

基本上我会尽量保持这一点。

我正在尝试做这样的事情(忽略除了我陈述的任何设计方面):

Image link.

我已经在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>

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

我希望这是有道理的。

提前致谢。

2 个答案:

答案 0 :(得分:3)

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

&#13;
&#13;
.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;  
}
&#13;
<div class="header-wrapper">
  <div class="header">
    <div class="circle top pink"></div>
  </div>
  <div class="header">
    <div class="circle yellow"></div>
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:3)

您实际上可以通过更少的HTML营销来实现这一目标,并使用::before::after伪造元素来创建圈子:https://developer.mozilla.org/en-US/docs/Web/CSS/::after

这会在每个标题中为圆圈创建一个子元素,并在标题上设置overflow:hidden会隐藏您不希望看到的圆圈部分。

.header-wrapper {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #0091cc;
  border-radius: 20px;
  height: 100px;
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
  width: 90%;
}

.header::after {
  border-radius: 50%;
  content: "";
  height: 400px;
  left: -100px;
  position: absolute;
  width: 400px;
}

.header:nth-child(1)::after {
  background-color: pink;
  top: -100px;
}

.header:nth-child(2)::after {
  background-color: orange;
  bottom: -100px;
}
<div class="header-wrapper">
  <div class="header"></div>
  <div class="header"></div>
</div>

https://jsfiddle.net/od62shsp/4/