Question 217615 in CSS Question posted in
Some basic documentation can be found here.

Change the color of the remaining area after using border-bottom-right-radius in CSS

[![enter image description here][1]][1]

Hi guys, how do I change the area in the remaining area (on the right side with the white color) to blue and left side of the remaining area (on the left side with the white color) to black using css? Anyone can help me would be much appreciated. Thanks!

.upper-container {
  position: relative;
  /* Establishes a new stacking context */
  z-index: 2;
  /* Places the .upper-container in front of other elements */
  background-color: black;
  color: white;
  height: 50vh;
  border-bottom-right-radius: 5rem;
}

.lower-container {
  position: relative;
  z-index: 1;
  /* Set lower z-index */
  background-color: blue;
  color: white;
  padding: 20px;
  height: 50vh;
  border-top-left-radius: 5rem;
}
<div class="upper-container"></div>
<div class="lower-container"></div>

This is how I made the curve and I have no idea how to change the color for the remaining area outside the curve

Tags:

2

Answers


  1. 0

    I don’t know what do you mean exactly, but maybe this will help, if not tell me.

    .upper-container {
    position: absolute;
    z-index: 2;
    background-color: black;
    color: white;
    height: 50vh;
    border-bottom-right-radius: 5rem;
    left: 0;
    right: 0;
    padding: 20px;
}


.lower-container {
    position: absolute;
    z-index: 1; /* Set lower z-index */
    background-color: blue;
    color: white;
    padding: 20px;
    height: 50vh;
    border-top-left-radius: 5rem;
    left: 0;
    right: 0;
}
    Login or Signup to reply.
  2. 0

    take a look at this too, maybe this is your answer.

    *{
    margin: 0;
    padding: 0;
}

.upper-container,.lower-container {
    height: 50vh;
    width: 50%;
    float: right;
}

.upper-container{
    background: black;
}

.lower-container {
    background-color: blue;
}

.center-container{
    position: absolute;
    background: #fff;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    height: 50vh;
    border-top-left-radius: 5rem;
    border-bottom-right-radius: 5rem;
}
    <div class="lower-container"></div>
<div class="center-container"></div>
<div class="upper-container"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search