如何在不同背景下 css 制作圆角

Question

我想创建该部分的圆角（我可以用 border-radius 来做），但是这些部分相互交叉，除了 border radius 之外还有另一个部分的这个奇怪的切口（见图）有没有什么方法可以在不使用这些部分的图片的情况下对其进行编码？

Answer 1

是的，您可以使用伪元素创建具有绝对位置的元素，并使用背景和透明组合创建曲线并使用绝对定位放置它。

但是，在这种情况下，您可以使用更简单的解决方案来获得结果。

您需要做的就是将每个区域包裹在具有其他背景的 div 中，并用边框半径显示它。

#container {
  background-color: #e4e4e4;
  width: 400px;
  padding: 0 20px;
  border: 1px solid #333;
}
.placeholder {
  height: 200px;
}
#top_div_back {
  background-color: #fff;
}
#top_div_front {
  background-color: #1a2048;
  border-bottom-left-radius: 25px;
}
#bottom_div_back {
  background-color: #1a2048;
}
#bottom_div_front {
  background-color: #fff;
  border-top-right-radius: 25px;
}

<div id="container">
  <div id="top_div_back">
    <div id="top_div_front" class="placeholder">
    </div>
  </div>
  <div id="bottom_div_back">
    <div id="bottom_div_front" class="placeholder">
    </div>
  </div>
</div>

这是迄今为止满足您需求的最简单、最稳定的解决方案。

Answer 2

您还可以在顶部使用 :after 伪元素来实现这一点，然后使用 z-index 将该元素带回来，这样它就不会与底部重叠。

这是一个例子：

.container {
  width: 50%;
  height: 200px;
  display: flex;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 5px;
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.top-section {
  flex-grow: 1;
  background-color: #1B2149;
  border-radius: 0 0 0 25px;
  position: relative;
}

.top-section:after {
  content: " ";
  z-index: -1;
  right: 0;
  bottom: -30px;
  height: 30px;
  width: 40px;
  position: absolute;
  background-color: inherit;
}

.bottom-section {
  flex-grow: 1;
  border-radius: 0 25px 0 0;
  background-color: #FFFFFF;
}

<div class="container">
  <div class="top-section"></div>
  <div class="bottom-section"></div>
</div>

如何在不同背景下 css 制作圆角

How to make rounded corners in css on different background

css

graphics