Как сделать обрезанный полукруг (форма D) с помощью CSS?

Question

Мне нужна помощь в понимании clip-path свойства CSS, чтобы моя версия обрезанного круга была ниже ...

Больше похоже на дизайнерскую версию:

Если вы видите на сером фоне, мой круг кажется намного больше и меньше круглым, когда онобрезается.

Что я могу сделать, чтобы сделать более круглый круг?Мои идеи были:

1. Использовать путь клипа, как показано во фрагменте ниже
2. Использовать псевдо :after элемент или правую границу с радиусом
3. Вырезать кругизображение из фотошопа и использовать его в качестве фонового изображения.

Желательно, чтобы я не использовал фоновое изображение.Однако мне нужно помнить об отзывчивости, поскольку круг не может резко изменить форму, когда мы изменяем размеры окна.

Является ли клип-траектория правильным путем?Может кто-нибудь предложить более простое и элегантное решение с другим способом, использующим 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

Согласно моему комментарию, вместо использования пути клипа для создания D (, который не очень хорошо поддерживается ), почему бы не использовать радиус границы для вашего 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 2

Вы можете просто использовать

• элемент внутреннего круга, чего можно достичь с 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>