CSS弯曲形状

Question

What is the best solution to create a layout like below

with the gap between two elements (white gap between red and green) with equal space

Answer 1

You can create this by using HTML and CSS like below or go through 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> 

Answer 2

A simple radial-gradient will do it:

 .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> 

To have the perfect half circle you may consider multiple background like this:

 .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>