CSS изогнутые формы

Question

Какое лучшее решение для создания макета, как показано ниже

с зазором между двумя элементами (белый зазор между красным и зеленым) с равным пространством

Answer 1

Простое radial-gradient сделает это:

.box {
  height:100px;
  background:radial-gradient(circle at left, 
    green 20%,transparent 20%,transparent calc(20% + 5px),red calc(20% + 5px))
}

<div class="box">

</div>

Чтобы получить идеальный полукруг, вы можете рассмотреть несколько фонов следующим образом:

.box {
  height:100px;
  background:
   radial-gradient(circle at left,green 50%,transparent 50%, transparent calc(50% + 5px),red calc(50% + 5px)) 20px 0/88px 100px,
   linear-gradient(green,green)left/20px 100%,
   linear-gradient(red,red)right/calc(100% - 20px - 85px) 100%;
  background-repeat:no-repeat;
}

<div class="box">

</div>

Answer 2

Вы можете создать это с помощью HTML и CSS, как показано ниже, или пройти через JSFiddle

    .banner-div {
      height: 100px;
      width: 320px;
      display: flex;
      background-color: #377d22;
    }
    
    .red-div {
      width: 30%;
      background-color: #eb3223;
      height: 100%;
      border: 2px solid #fff;
      border-top-right-radius: 50%;
      border-bottom-right-radius: 50%;
    }
    
    .other-div {
      width: 70%;
      height: 100%;
    }

    <div class="banner-div">
      <div class="red-div">
      </div>
      <div class="other-div"></div>
    </div>