如何按下三角形并将内容包含在白色圆圈的顶部？我正在尝试找到一种解决方案来创建一个包含背景图像的英雄部分，其中包含三个叠加形状作为图像的一部分。覆盖层顶部将是 h1、p 和 btn。我在下面提供了一张屏幕截图，展示了设计的外观。
有以下三个叠加层：
这是我到目前为止所拥有的。我在下面包含了一个片段，并且在 Codepen 上也有一个工作版本。圆圈位于左下角的正确位置。
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
svg {
width: 628;
height: 628:
}
.element {
position: relative;
width: 100%;
min-height: 628px;
background: url(https://images-prod.healthline.com/hlcmsresource/images/AN_images/health-benefits-of-apples-1296x728-feature.jpg) no-repeat center top;
background-size: cover;
}
.element:before{
content: '';
position: absolute; bottom: 0; left: 0;
width: 100%;0
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
.circle-outer {
cx: 200;
cy: 720;
fill: #fff;
fill-opacity: 0.6;
r: 420;
w: 628;
h: 628;
}
.circle-inner {
cx: 200;
cy: 720;
fill: #fff;
fill-opacity: 0.6;
r: 400;
}
.hero-triangle {
content: '';
position: relative;
width: 100%;
height: 100px;
background: #fff;
-webkit-clip-path: polygon(0 8%, 0% 100%, 100% 100%);
clip-path: polygon(0 80%, 0% 100%, 100% 100%);
z-index: 99;
}
<div class="container">
<div class="element">
<div class="hero-content">
<h1>This belongs in circle</h1>
<p>This belongs in circle too.</p>
<button class="btn btn-primary">Learn more</button>
</div>
<svg viewbox width="1000" height="580" viewBox="0 0 100 100">
<circle class="circle-outer" />
<circle class="circle-inner" />
<polygon points="0,0 0,200 1000,200" style="fill:#fff;" />
</svg>
</div>
</div>
<div class="container">
<h4>Body content must be positioned right underneath hero image for all widths.</h4>
由于圆圈只是装饰性的而不是增加意义，因此它们没有必要成为元素。它们作为背景图像就足够了。
这是一个简单的代码片段，它放置内容元素并为其提供两个背景图像，两者都具有一定的透明度，使用径向渐变使它们成为圆形。
.element { position: relative; width: 100%; rmin-height: 628px; background: url(https://images-prod.healthline.com/hlcmsresource/images/AN_images/health-benefits-of-apples-1296x728-feature.jpg) no-repeat center top; background-size: cover; clip-path: polygon(0 0, 0 80%, 100% 100%, 100% 0); aspect-ratio: 1296 / 728; } .hero-content { position: absolute; left: -12.5%; top: 50%; width: 70%; padding-top: 5%; box-sizing: border-box; aspect-ratio: 1 / 1; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 65%, transparent 65% 100%), radial-gradient(circle, rgba(255, 255, 255, 0.2) 0 70%, transparent 70% 100%); background-repeat: no-repeat; background-size: 100% 100%; display: flex; align-items: center; rjustify-content: center; flex-direction: column; } .hero-content h1 { font-size: 2vw; } .hero-content p { font-size: 1vw; } .hero-content button { font-size: 1vw; }