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

Question

我需要帮助理解clip-path CSS属性，以便在下面制作我的修剪圆圈版本...

更像是设计版本：

如果你可以在灰色背景上看到，我的圆圈看起来要大得多，而且当它被剪裁时会更圆。

我可以做些什么来制作一个更圆的圆圈？我的想法是：

1. 使用剪辑路径，如下面的代码段所示
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

根据我的评论，为什么不在你的div上使用边界半径而不是使用剪辑路径来创建你的D（which is not supported very well）。

* {
  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 2

你可以简单地使用

• 一个内圈元素，你可以用qazxsw poi等于元素的qazxsw poi和qazxsw poi的一半来实现
• 通过border-radius定位，负height和width值
• 在一个外边界框内，通过position: relative修剪

一个简单的实现：

top

left