如何按下三角形并将内容包含在白色圆圈的顶部？我正在尝试找到一种解决方案来创建一个包含背景图像的英雄部分，其中包含三个叠加形状作为图像的一部分。覆盖层顶部将是 h1、p 和 btn。我在下面提供了一张屏幕截图，展示了设计的外观。

有以下三个叠加层：

1. 直角形状，底部透明度为 0%。
2. 具有透明度的外圆。
3. 具有透明度的内圆。

这是我到目前为止所拥有的。我在下面包含了一个片段，并且在 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>