如何使用CSS在三角形内嵌入可读且SEO友好的文本

你要的效果纯CSS完全可以实现，当前代码主要存在两个问题：

1. 笔误：.container的width属性漏写了单位后缀，你写的600p修正为600px
2. 缺少对容器整体的裁剪，且额外给p标签加了top:50px导致顶部空出多余区域，打乱了绕排逻辑

修正后代码 #

CSS #

.container {
    width: 600px;
    height: 600px;
    background: white;
    max-width: 600px;
    position: relative;
    /* 整体裁剪为三角形，保证超出的文字被隐藏 */
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    margin: 0 auto;
}

.left-shape{
    shape-outside: polygon(0% 0%, 0% 100%, 50% 0%);
    float: left;
    width: 50%;
    height: 100%;
}

.right-shape{
    shape-outside: polygon(50% 0%, 100% 0%, 100% 100%);
    float: right;
    width: 50%;
    height: 100%;
}

.container p {
    margin: 0;
    padding: 15px 0;
    text-align: justify;
}

HTML #

<div class="container">
    <div class="left-shape"></div>
    <div class="right-shape"></div>
    <p>Aenean ac pellentesque lacus, sit amet posuere nisl. Nunc consequat fermentum bibendum. Sed congue quis est ac pellentesque. Donec euismod turpis et massa pretium condimentum. Mauris id felis a enim consequat elementum non vel nisl. Integer nulla nulla, aliquet sed justo nec, gravida pulvinar purus. Suspendisse venenatis tempor dapibus. Sed ac porttitor mauris, sit amet condimentum lacus. Vivamus convallis risus ac augue mattis finibus. Pellentesque in pharetra felis. Integer vel dictum nibh. Donec nec scelerisque sem. Phasellus hendrerit at dolor eu mattis. Aliquam ac ante velit. Nullam tincidunt nibh ut urna euismod placerat.</p>
</div>

实现说明 #

• 左右浮动元素不需要额外加clip-path和背景色，仅保留shape-outside定义文字绕排边界即可。
• 外层容器直接加clip-path裁剪为三角形，所有超出三角形范围的文字会被直接隐藏，不需要额外处理文字截断。
• 去掉p标签的top偏移，让文字从容器顶部开始排布，自动沿着左右shape-outside边界换行，刚好填充整个三角形区域。
• 所有文本都在完整的p标签内，不会被拆分，完全规避了你之前使用SVG方案遇到的SEO、读屏器不友好的问题。
• 如果需要调整三角形的形状，仅需要修改clip-path和两个shape-outside的多边形坐标即可适配。

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