如何使用 CSS 制作一个剪裁的半圆（D 形）？

Question

我需要帮助理解剪切路径CSS 属性，以便使我的剪切圆版本如下......

更像设计版本：

如果您可以在灰色背景上看到，我的圆圈在被剪裁后显得更大且更圆。

我该怎么做才能使圆圈更圆？我的想法是：

1. 使用剪辑路径，如下面的代码片段所示
2. 使用伪:after元素或带半径的右边框
3. 从 Photoshop 中剪切一个圆形图像并将其用作背景图像。

最好，我想避免使用背景图像。但是，我需要牢记响应能力，因为当我们调整窗口大小时，圆圈无法大幅改变形状。

剪辑路径是正确的方法吗？有人可以用另一种使用 CSS 的方式提出一个更简单、更优雅的解决方案吗？

提前谢谢您，这是我写的一个片段，说明了我如何剪切“绿色/蓝色”背景：

.page-banner {
  background: grey;
  width: 100%;
  height: 300px;
  background-position: top;
  overflow: hidden;
}

.page-banner-text {
  position: absolute;
  background: #00525d8a;
  padding-left: 100px;
  width: 60%;

  /* adjustments to snippet */
  top: 10px;
  left: 10px;
  height: 300px;
  
  /* this is the code for circle */
  clip-path: circle(560px at left);
  padding-right: 250px;
}

<div class="page-banner">
  <div class="container">
    <div class="page-banner-text">
      <h1 class="block-title">Programs For Adults</h1>
      <p>Programs to help children with disabilities in Western MA at all ages and levels of need.</p>
      <div id="banner-donate-button"><a href="#" class="" target="_self" title="Donate">DONATE</a></div>
    </div>
  </div>
</div>

Answer 1

对于任何希望通过该属性解决此问题的人来说clip-path，您可以对剪辑路径进行更多控制ellipse。使用OP提供的代码，我用椭圆替换了圆形，并切换到百分比以获得稍微更好的响应感觉。

clip-path:ellipse(67% 100% at 8% 50%);

前两个数字表示椭圆的高度和宽度。第一个数字越大，可见区域越宽。第二个数字越大，高度越宽。我们的目标是 D 形状，因此通过调整第一个数字，我们可以使 D 或多或少突出。

这就是后两个数字（即定位）发挥作用的地方。 at 50% 50%将其居中。通过调整第一个数字，即 X 定位，我们可以将其移动到需要适合的位置。在尝试了这些数字之后，您应该能够准确地得到您想要的 D。

.page-banner {
  background: grey;
  width: 100%;
  height: 300px;
  background-position: top;
  overflow: hidden;
}

.page-banner-text {
  position: absolute;
  background: #00525d8a;
  padding-left: 100px;
  width: 60%;

  /* adjustments to snippet */
  top: 10px;
  left: 10px;
  height: 300px;
  
  /* this is the code for circle */
  clip-path: ellipse(67% 100% at 8% 50%);
  padding-right: 250px;
}

<div class="page-banner">
  <div class="container">
    <div class="page-banner-text">
      <h1 class="block-title">Programs For Adults</h1>
      <p>Programs to help children with disabilities in Western MA at all ages and levels of need.</p>
      <div id="banner-donate-button"><a href="#" class="" target="_self" title="Donate">DONATE</a></div>
    </div>
  </div>
</div>