css - 如何使用 CSS 制作一个剪裁的半圆(D 形)？

Question

我需要帮助理解 clip-path CSS 属性，以便使我的裁剪圆版本如下...

更像是设计版:

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

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

1. 在下面的代码片段中使用 clip-path
2. 使用伪 :after 元素或带半径的右边框
3. 从 photoshop 中剪下一张圆形图片并将其用作背景图片。

我最好避免使用背景图片。但是，我需要牢记响应能力，因为当我们调整窗口大小时，圆圈的形状不会发生剧烈变化。

clip-path 是正确的方法吗？有人可以用另一种使用 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>