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

2 sections with interlocking and rounded corners – CSS

Can any one help me how can I accomplished this using CSS? I’ve tried the css below and I think I missing something can anyone teach me how to do it?

Please see image below

HTML

<div class="nwdev">
   <div class="dev1 dev11"></div>
   <div class="dev1 dev111"></div>
</div>

CSS

.nwdev {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #fff5ea;
    flex-direction: row;
}


.dev1.dev111 {
    background: red;
    border-radius: 80px 0px 0px 0px;
}

.dev1.dev11 {
    background: yellow;
    border-radius: 0px 0px 80px 0px;
}
Tags:

2

Answers


  1. 0

    You are quite close. Just give .dev11 and .dev111 a width of 50% and use linear-gradient as background for .nwdev:

    .nwdev {
    height: 90vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to right, red 50%, yellow 50% 100%);
    flex-direction: row;
}


.dev1.dev111 {
    width: 50%;
    background: red;
    border-radius: 80px 0px 0px 0px;
}

.dev1.dev11 {
    width: 50%;
    background: yellow;
    border-radius: 0px 0px 80px 0px;
}
    Login or Signup to reply.
  2. 0

    You can try the following code:

    In your html add a new div inside the element on the right side:

    <div class="nwdev">
   <div class="dev1 dev11"></div>
   <div class="dev1 dev111">
      <div class="inside"></div>
   </div>
</div>

    First of all you need to add a width to your elements, because they are flex items you can use flex-basis: 50%; which is equivalent to width in this case, but it’s more responsive in some situations.
    Then, remove border radius from .dev111 and add border radius to .inside:

    .nwdev {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #fff5ea;
    flex-direction: row;
}

.dev1 {
  flex-basis: 50%; /* width: 50% also works here */
}

.dev111 {
    background: yellow;
}

.dev11 {
    background: yellow;
    border-radius: 0px 0px 80px 0px;
}

.inside {
    width: 100%;
    height: 100%;
    background-color: #fff5ea;
    border-radius: 80px 0px 0px 0px;
}

    Note also that I changed the selectors .dev1.dev11 to .dev11 and .dev1.dev111 to .dev111 because you don’t need to be as specific.
    While it is not exacly like your picture it should be enough to get you started.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search