如何在CSS中让文本环绕不规则形状

Question

如何在CSS中让文本环绕不规则形状

htmlcssimage

4

我正在尝试找出如何让文本在页面上围绕不规则形状流动，并且并没有成功找到我想要的方法。

我附上了一张图片，展示了我想要使用的布局。

我希望文本能够像图片中的那样流动。我是在MS Paint中制作的这个模型。

每一页都可能有任何内容，因此我不想手动调整每一页的文本。左上角始终相同，因此理想情况下，我可以添加CSS规则，使文本无论实际文本内容如何都能以这种方式运行。

- Sherwin Flight

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- PTD · Accepted Answer

~~It currently isn't widely supported~~ [96% support in 2022]，但是您可以使用shape-outside CSS声明来实现所需的效果： 请注意，这只是一个示例，而不是解决您问题的确切方法。

.element{
    shape-outside: polygon(0 0, 0 100%, 100% 100%);
    width: 20em;
    height: 40em;
}

这将创建一个三角形区域（三边形），文本将不会进入该区域。对于不支持此功能的浏览器，github上提供了一个polyfill。这里有相关信息。

关于shape-outside，网上有一些很好的文章，特别是在HTML5 Rocks和A List Apart等网站上。

还有一个类似的问题是几年前提出的，可能也有用。 编辑：添加代码片段 - ~~例子似乎只在Chrome中工作，没有polyfill~~。

.wrapper {
    width: 300px;
}

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

<div class="wrapper">
    <div class="element"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>