'Change background color under border-radius of specific element

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

htmlcssuser-experience


Solution 1:[1]

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

Solution 2:[2]

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

Solution 3:[3]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Link Strifer
Solution 2 Varun Kaklia
Solution 3 Sharjeel Faiq

Related Questions