Текст обтравочного контура вокруг четверти круга (CSS)

Я хотел бы добиться эффекта переноса текста вокруг четверти круга в верхнем левом углу элемента div, используя свойства CSS clip-path и shape-outside.

В настоящее время мой код успешно обрезает полукруг, но мне нужно, чтобы это была четверть круга.

Вот мой существующий код:

.contenedor {
  width: 70vw;
  height: auto;
  margin: 25px auto;
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.5);
  padding: 40px;
}

#circle {
  float: left;
  width: 150px;
  height: 150px;
  margin: 0;
  shape-outside: circle(50% at 10%);
  /* Needs adjustment for quarter circle */
  clip-path: circle(50% at 0%);
  /* Might be unnecessary with proper shape-outside */
  background: lightblue;
}

<div class = "contenedor">
  <div id = "circle"></div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Egestas dui id ornare arcu odio ut sem nulla. Urna et
    pharetra pharetra massa massa ultricies. Suscipit tellus mauris a diam maecenas sed enim. Quam pellentesque nec nam aliquam sem et tortor consequat. Pretium fusce id velit ut tortor pretium viverra suspendisse potenti. Sed felis eget velit aliquet
    sagittis id consectetur. Consectetur purus ut faucibus pulvinar elementum. Malesuada proin libero nunc consequat interdum varius...</div>
</div>

circle(50% at 0% 0%) ?

— 06.06.2024 17:26

Вот и все. Я не понял, что это положение центра круга, и отсутствие позиции Y дало значение по умолчанию 50%. Спасибо!

— 06.06.2024 17:30

html css clip-path

06.06.2024 17:21

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как упоминал @TemamiAfif, переключите кружок на at 0% 0% (т. е. вверху/слева).

.contenedor {
  width: 70vw;
  height: auto;
  margin: 25px auto;
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.5);
  padding: 40px;
}

#circle {
  float: left;
  width: 150px;
  height: 150px;
  margin: 0;
  shape-outside: circle(50% at 0 0);
  clip-path: circle(50% at 0 0);
  background: lightblue;
  /* a little spacing margin */
  shape-margin: .5em;
}

<div class = "contenedor">
  <div id = "circle"></div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Egestas dui id ornare arcu odio ut sem nulla. Urna et
    pharetra pharetra massa massa ultricies. Suscipit tellus mauris a diam maecenas sed enim. Quam pellentesque nec nam aliquam sem et tortor consequat. Pretium fusce id velit ut tortor pretium viverra suspendisse potenti. Sed felis eget velit aliquet
    sagittis id consectetur. Consectetur purus ut faucibus pulvinar elementum. Malesuada proin libero nunc consequat interdum varius...</div>
</div>

shape-margin будет лучше, чем классический маржа

— 06.06.2024 21:52

Правда, я как раз об этом подумал.

— 06.06.2024 21:57

06.06.2024 20:52