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

2023年4月30日 208次阅读

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

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

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

我尝试在圆形div外部放置一个透明圆,但不会从外包装继承颜色,但如果背景颜色设置为透明,它将继承矩形div的颜色.
《如何使用HTML和CSS重新创建图像？》

编辑：为了减少任何混淆,请使用此作为参考.这就是我想要实现的目标.

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

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

最佳答案 您可以使用径向渐变来尝试在矩形的末尾创建一个形状以满足您的需要.

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

.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

点赞