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.
Hey sorry but it's hard to tell anything without seeing the coding. Please at least share code for solution. Thanks
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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.