css - 如何使用 HTML 和 CSS 重新创建图像？

Question

如何使用 HTML 和 CSS 重新创建图像模型？

如何在矩形 div 的末尾实现曲线？

我将如何在矩形 div 和圆形 div 之间插入一个小的透明区域，其中透明间隙应该从外部包装 div 继承任何颜色/图像，而不是从放置圆形 div 的矩形 div ？

我尝试在圆形 div 外面放置一个透明圆圈，但这不会继承外包装的颜色，但如果其背景颜色设置为 透明 。

编辑:为减少任何形式的混淆，请使用此作为引用。这就是我想要实现的目标。

.wrapper{
  position: relative;
}
.rectangle{
  width: 70%;
  height: 50px;
  background: black;
  margin-bottom: 20px;
}
.circle{
  position: absolute;
  width: 50%;
  height: 300px;
  border-radius: 50%;
  border: 2px solid;
  top: -5px;
  right: 0;
  z-index: 999;
  background: white;
}

<div class="wrapper">
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="circle"></div>
</div>

Answer 1

您可以使用径向渐变尝试在矩形的末端制作一个形状以满足您的需要。

以我的努力​​为例:

.container {
  position: relative;
}

.circle {
  position: absolute;
  right: 0;
  top: 10%;
  float: right;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: #000000;
}

.rectangle {
  position: absolute;
  left: 0;
  right: 100px;
  top: 20px;
  height: 40px;
  background: radial-gradient(circle at 100% calc(100% + 35px), rgba(0,0,0,0) 110px, #000000 0);
}

<div class="container">
  <div class="rectangle"></div>
  <div class="circle"></div>
</div>

More information about radial gradients