Как сделать скругленный переход между двумя блоками

Question

Подскажите каким образом, можно свертать такой бордер?)

Answer 1

Один из вариантов:

*{
  margin:0;
}
.wrap_top,
.wrap_bottom{
  width:100%;
  }
.wrap_top{
  height:80px;
  display:flex;
  background-color:#fff;
  }
.wrap_bottom{
  height:100px;
  background-color:#39f;
  }
.inner_1,
.inner_2{
  height:100%;
  flex: 0 0 50%;
  }
.inner_1{
  border-radius:12px 12px 0 0;
  background-color:#39f;
  }
.inner_2{
  background-color:#39f;
  }
.inner_2:after{
  content:'';
  height:100%;
  width:100%;
  border-bottom-left-radius:12px;
  float:left;
  background-color:#fff;
}

<div class='wrap_top'>
  <div class='inner_1'>

  </div>
  <div class='inner_2'>

  </div>
</div>
<div class='wrap_bottom'></div>

Answer 2

Ещё один вариант:

*{
  margin:0;
  }
.wrap_top,
.wrap_bottom{
  width:100%;
  }
.wrap_top{
  height:80px;
  display:flex;
  background-color:#fff;
  }
.wrap_bottom{
  height:100px;
  background-color:#39f;
  border-radius:0 12px 0 0;
  }
  .inner_1_wrap,
  .inner_2_wrap{
    height:100%;
    flex: 0 0 50%;
    }
  .inner_1_wrap:hover ~ .inner_2_wrap{
    background-color:#efefef;
    }
  .inner_2_wrap{
    background-color:#39f;
    }
    .inner_1,
    .inner_2{
      width:100%;
      height:100%;
      }
    .inner_1{
      border-radius:12px 12px 0 0;
      background-color:#39f;
      }
    .inner_2{
      border-bottom-left-radius:12px;
      background-color:#fff;
      }
    .inner_1:hover{
      background-color:#efefef;
      cursor:pointer;
      }

<div class='wrap_top'>
  <div class='inner_1_wrap'>
    <div class='inner_1'>

    </div>
  </div>
  <div class='inner_2_wrap'>
    <div class='inner_2'>

    </div>
  </div>
</div>
<div class='wrap_bottom'></div>

БЛОГ НА HUSL

Как сделать скругленный переход между двумя блоками

Ответы (2 шт):