htmlcssclip-path

Clip-Path Text Around Quarter Circle (CSS)


I'd like to achieve a text wrapping effect around a quarter circle in the top left corner of a div using CSS clip-path and shape-outside properties.

Currently, my code successfully clips a half circle, but I need it to be a quarter circle.

Here's my existing code:

.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>


Solution

  • As mentioned by @TemamiAfif, switch the circle to at 0% 0% (i.e. top/left)

    .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>