<分区>
我想像这样在 HTML/CSS 中创建一个元素
我基本上想创建一个内部透明的半圆的矩形
我目前正在使用这个类，但不起作用，因为在大屏幕上会变形
.half-negative-circle{
width:100%;
height:100%;
position:relative;
overflow:hidden;
z-index: 1 !important;
}
.half-negative-circle:before{
content:'';
position:absolute;
right:70%;
width:55%;
height:100%;
border-radius:100%;
box-shadow: 300px 200px 100px 300px #0b77dc ;
}
如果您能以最佳方式创建此类元素，我们将不胜感激。
提前致谢
最佳答案
最简单但有点粗糙的方法是使用容器的背景图像，然后在右侧放置一个具有相同背景图像的虚拟元素。然后可以调整左上角和左下角的边框半径。
示例:
* { box-sizing: border-box; margin: 0; padding: 0; }
.banner {
background-image: url(https://lorempixel.com/320/160/nature);
background-repeat: no-repeat;
background-position: center right;
width: 320px; height: 160px;
position: relative;
}
.caption {
position: absolute; top: 0; left: 0;
width: 70%; height: 100%;
color: #fff; font-size: 1.3em; font-family: sans-serif;
padding: 8px; background-color: rgba(20, 120, 210, 0.8);
}
.dummy {
position: absolute; top: 0; right: 0;
width: 55%; height: 100%;
border-top-left-radius: 60% 70%;
border-bottom-left-radius: 100% 100%;
background-image: url(https://lorempixel.com/320/160/nature);
background-repeat: no-repeat;
background-position: center right;
}<div class="banner">
<div class="caption">Lorem Ipsum</div>
<div class="dummy"></div>
</div>关于html - 如何在 HTML/CSS 中创建一个元素，其中包含一个矩形，其中左侧有一个半圆？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43394449/