如何使用CSS的shape-outside属性实现文本围绕三角形排列？

我来给你演示怎么用CSS的shape-outside属性实现文本围绕三角形排列的效果，直接上实操方案：

首先是核心CSS代码：

.triangle {
  width: 40%;
  height: 400px;
  background-color: green;
  float: left;
  /* 定义文本环绕的多边形形状（直角三角形） */
  -webkit-shape-outside: polygon(0 0, 100% 0, 100% 100%);
  shape-outside: polygon(0 0, 100% 0, 100% 100%);
  /* 把矩形元素裁剪成三角形，让视觉和文本环绕区域匹配 */
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.text {
  /* 可根据需求添加文本样式，比如行高、内边距等 */
}

对应的HTML结构：

<div class="triangle"></div>
<div class="text">
  <p>Lorem ipsum dolor sit amet, nobis commune pertinax ei quo, pri laudem putant instructior in. Per molestiae evertitur ut, voluptua volutpat definitionem te sea. Eos adhuc accusata ei, vim ut quas consulatu. Ne eam quas graece, mel atqui mollis dissentias cu.</p>
  <!-- 可以多添加几段文本，更直观地看到环绕效果 -->
</div>

简单拆解下关键逻辑：

• 给三角形元素设置float: left，让文本能自然在它右侧排布
• shape-outside: polygon()是实现环绕的核心，通过三个坐标点定义了文本需要避开的三角形区域
• clip-path用来把原本的矩形元素裁剪成三角形，让视觉呈现和文本环绕的范围对应起来

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