如何在HTML / CSS中创建一个元素，其中左侧有一个半圆形的矩形？

Question

我想像这样在HTML / CSS中创建一个元素

我基本上想要在

内创建一个半圆透明的矩形

我目前正在使用这个课程，但因为在大屏幕上失去形状而无法工作

.half-negative-circle{    
    width:100%;    
    height:100%;    
    position:relative;    
    overflow:hidden;    
    z-index: 1 !important;    
}
.half-negative-circle:before{    
    content:'';    
    position:absolute;    
    right:70%;   
     width:55%;    
     height:100%;    
     border-radius:100%;   
      box-shadow: 300px 200px 100px 300px #0b77dc ;
    }

非常感谢有关创建此类元素的最佳方法的任何帮助。

提前多多感谢

Answer 1

最简单但有点粗略的方法是使用容器的背景图像，然后使用位于右侧的相同背景图像的虚拟元素。然后可以调整左上角和左下角的半径。

示例：

* { box-sizing: border-box; margin: 0; padding: 0; }
.banner {
  background-image: url(https://lorempixel.com/320/160/nature);
  background-repeat: no-repeat;
  background-position: center right;
  width: 320px; height: 160px;
  position: relative;
}
.caption {
  position: absolute; top: 0; left: 0;
  width: 70%; height: 100%; 
  color: #fff; font-size: 1.3em; font-family: sans-serif;
  padding: 8px; background-color: rgba(20, 120, 210, 0.8);
}
.dummy {
  position: absolute; top: 0; right: 0;
  width: 55%; height: 100%; 
  border-top-left-radius: 60% 70%;
  border-bottom-left-radius: 100% 100%;
  background-image: url(https://lorempixel.com/320/160/nature);
  background-repeat: no-repeat;
  background-position: center right;
}

<div class="banner">
  <div class="caption">Lorem Ipsum</div>
  <div class="dummy"></div>
</div>