如何使用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>