如何用CSS将border-radius圆角外左右剩余区域分别设为黑、蓝色？

你可以通过给body设置水平方向的线性渐变，将页面左侧区域设为黑色、右侧设为蓝色，刚好匹配两个容器圆角露出的空白区域。同时需要清除body的默认边距，避免出现额外空白。

完整代码如下：

body {
  margin: 0; /* 清除默认边距 */
  background: linear-gradient(90deg, black 50%, blue 50%); /* 水平分色背景 */
}

.upper-container {
  position: relative;
  z-index: 2;
  background-color: black;
  color: white;
  height: 50vh;
  border-bottom-right-radius: 5rem;
}

.lower-container {
  position: relative;
  z-index: 1;
  background-color: blue;
  color: white;
  padding: 20px;
  height: 50vh;
  border-top-left-radius: 5rem;
}

<div class="upper-container"></div>
<div class="lower-container"></div>

原理说明 #

• body的线性渐变将页面从垂直中线分为左右两部分，左半部分为黑色、右半部分为蓝色。
• 上方的黑色容器占满整个页面宽度，右下圆角会露出下方左侧的黑色背景；下方的蓝色容器同样占满宽度，左上圆角会露出上方右侧的蓝色背景，刚好填补你提到的白色剩余区域。

内容的提问来源于stack exchange，提问作者Humble Chicken