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

Question

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

更像设计版：

如果你能在灰色背景上看到，我的圆圈在剪裁后看起来更大更圆。

怎样做才能使圆更圆？我的想法是：

按照下面的代码片段使用剪辑路径
使用伪 :after 元素或带有半径
从 photoshop 中剪切一个圆形图像并将其用作背景图像。

我最好避免使用背景图片。但是，我需要牢记响应能力，因为当我们调整 window.

大小时，圆圈不能大幅改变形状

剪辑路径是否正确？有人可以使用 CSS?

以另一种方式提出更简单优雅的解决方案吗

提前谢谢你，这是我写的一个片段，说明了我如何剪裁 "green/blue" 背景：

.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

您可以简单地使用

一个内圆元素，你可以用 border-radius 等于元素 height 和 width
通过 position: relative 以负值 top 和 left 定位
在外部边界框内，通过 overflow: hidden

一个简单的实现：

#container {
  height: 300px;
  width: 100%;
  background-color: gray;
  overflow: hidden;
}

#circle {
  height: 600px;
  width: 600px;
  background-color: rgba(0, 0, 255, 0.5);
  
  position: relative;
  top: -150px;
  left: -375px;
}

<div id="container">
    <div id="circle"></div>
</div>

Answer 2

根据我的评论，为什么不使用剪辑路径来创建您的 D (which is not supported very well)，为什么不在您的 div.

上使用边框半径

* {
  box-sizing: border-box;
}

.page-banner {
  position: relative;
  background: url(https://www.fillmurray.com/300/900) center center no-repeat;
  background-size: cover;
  width: 100%;
  overflow: hidden;         /* hide overflowing bits of circle */
  min-height: 300px;        /* just give enough height to fit text at smallest screen width size */
}

.circle {
  background-color: rgba(50, 108, 116, 0.9);   /* use rgba for transparent effect */
  color: white;
  transform: translate(-50%, -50%);            /* move the circle left 50% of it's own width and up 50% of it's own height */
  border-radius: 50%;
  padding-top: 100%;                           /* this gives us a responsive square */
  position: absolute;
  top:50%;                                     /* this vertically centers the circle */
  left:0;
  width:100%;
  min-width:600px;                              /* this is the miniimum dimensions to allow circle to fill smaller screens */
  min-height:600px;
}

.page-banner-text {
  position: absolute;                           /* just positions the text on the right of the cirecle */
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  padding:2em;
  width:40%;
}

<div class="page-banner">
  <div class="circle">
    <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>

唯一的响应问题是随着屏幕变宽，D 变平（随着半径延伸），但您可以通过向圆添加最大宽度和高度来解决这个问题 div

Answer 3

对于希望使用 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>

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

How to make a clipped half circle (D shape) using CSS?

css

clip-path