更改特定元素边界半径下的背景颜色

Question

我将在部分的底部添加一个边界半径。我身体的背景颜色是黑色。我试图让每个边界半径下的颜色与下一节的背景颜色相匹配。不是主体的背景色。不知道如何在谷歌上找到这个问题，如果问题已经被问到了，请提前道歉。

边界半径问题

Answer 1

您可以使用before伪元素和z-index-1来完成这项工作，这有点棘手：

section {
border-radius: 0 0 40px 40px;
height: 200px;
position: relative;
width: 100vw;
}
section:after {
content: "";
position: absolute;
top: -40px; /* border radius size * -1 */
left: 0;
height: 40px; /* border radius size */
width: 100vw;
z-index: -1;
}
section:nth-child(odd) {
background-color: magenta;
}
section:nth-child(even) {
background-color: cyan;
}
section:nth-child(odd):after {
background-color: magenta;
}
section:nth-child(even):after {
background-color: cyan;
}

现场示例：https://codesandbox.io/s/quizzical-river-iwxz4c?file=/src/styles.css

Answer 2

嘿，很抱歉，如果没有看到编码，很难说出任何事情。请至少共享解决方案的代码。感谢

Answer 3

与我们分享您尝试过的内容(原始代码(，这样我们就可以更清楚地了解问题，并告诉您任何解决问题的方法。