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

Question

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

如何在rctangular div的末尾实现该曲线？

如何在矩形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

您可以使用radial gradient来尝试在矩形的末尾创建一个符合您需求的形状。

这是我的努力的一个例子：

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

More information about radial gradients

Answer 2

  

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

您可以在.wrapper上设置一些颜色，并将其作为背景颜色在后代中使用关键字 currentColor
如果你真的想要一些透明区域，那么你不应该首先在那个区域画任何东西。如果形状对于CSS太复杂，则在SVG中更容易做到。

MDN on currentColor
A few use cases（小心使用线性渐变的IE :(）

注意：z-index: 1没问题。没有理由999或1000000§§§除非你用998要求它：o

.wrapper{
  position: relative;
  color: white; /* reference */
}
.rectangle{
  width: 70%;
  height: 50px;
  background: black;
  margin-bottom: 20px;
}
.circle{
  position: absolute;
  width: 50%;
  height: 300px;
  border-radius: 50%;
  border: 10px solid currentColor; /* used here */
  top: -5px;
  right: 0;
  z-index: 1;
  background: black;
}

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