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

Question

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

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

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

我尝试将透明圆形放在圆形div外部，但如果其背景颜色设置为transparent，它将不会从外部包装中继承颜色，而是会从矩形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>

- Varun Nair

---

你是否可以使用SVG呢？ - roberrrt-s

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>

点击查看径向渐变的更多信息

- Pete

---

这实际上是一个非常狡猾的解决方案。狡猾，狡猾！但它有效，加1分给你的信用。 - Varun Nair

Answer 2

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

您可以在.wrapper上设置一些颜色，并将其作为子元素的背景颜色使用关键字currentColor。 如果您真的想要一些透明区域，则首先不应在该区域内绘制任何东西。如果形状太复杂以至于无法通过CSS完成，则在SVG中更容易实现。

注：z-index: 1没问题。除非您要求的是998:o，否则没有理由选择999或1000000§§§。

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

- FelipeAls

---

但是，如果最外层 div 的背景是一个背景图片而不是背景颜色呢？或者说，它有一个渐变的背景呢？ - Varun Nair