如何用CSS的clip-path和shape-outside实现文本绕左上角四分之一圆排列

要在div左上角实现文本环绕四分之一圆的效果，只需调整shape-outside和clip-path的参数，匹配左上角四分之一圆的形状即可。以下是修改后的完整代码：

修改后的CSS代码 #

.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(100% at 0% 0%);
  /* 裁剪元素为左上角四分之一圆 */
  clip-path: circle(100% at 0% 0%);
  background: lightblue;
}

HTML代码 #

<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-outside: circle(100% at 0% 0%)：以元素左上角（0% 0%）为圆心，半径设为元素的100%宽/高，在元素范围内形成左上角四分之一圆，文本会自动绕开该区域排布。
• clip-path: circle(100% at 0% 0%)：将元素裁剪为左上角四分之一圆，让背景仅显示该区域，与文本环绕形状保持一致。
• 保留float: left，确保文本能环绕在元素的右侧和下方。

内容的提问来源于stack exchange，提问作者Sanxofon