CSS弯曲形状

Question

创建如下所示的布局的最佳解决方案是什么

两个元素之间的间距（红色和绿色之间的白色间距）具有相等的间距

Answer 1

您可以使用如下所示的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>

Answer 2

一个简单的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>