您可以使用单个元素（加上伪元素）来完成此操作，radial-gradient而伪元素会创建圆，而父元素将背景用作背景。
div:before { /* creates the red circle */
position: absolute;
content: '';
width: 90px;
height: 90px;
top: -75px; /* top = -75px, radius = 45px, so circle's center point is at -30px */
left: calc(50% - 45px);
background-color: red;
border-radius: 50%;
}
div {
position: relative;
margin: 100px auto 0 auto;
width: 90%;
height: 150px;
border-radius: 6px;
/* only the below creates the transparent gap and the fill */
background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px); /* use same center point as with concentric circles but larger radius */
}
/* just for demo */
body,
html {
font-size: 18px;
}
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div></div>
602392714
清零编程群