Change background color under border-radius of specific element-CodePudding

I'm adding a border radius to the bottom of my sections. The background color of my body is black. I'm trying to have the color under each border-radius match the background-color of the next section. Not the background color of the body. Didn't know how to word question to find on google, sorry in advanced if question has already been asked.

Border Radius Problem

CodePudding user response：

You can do this using a before pseudo-element and z-index -1, it's kinda tricky:

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;
}

Live example: https://codesandbox.io/s/quizzical-river-iwxz4c?file=/src/styles.css

CodePudding user response：

Hey sorry but it's hard to tell anything without seeing the coding. Please at least share code for solution. Thanks

CodePudding user response：

Share with us what you have tried (the original code) so we can be more clear about the problem and can tell you any fix to the problem.