html - 如何让文本在 CSS 中围绕不规则形状流动

Question

我正在尝试弄清楚如何让文本在页面上的不规则形状周围流动，但我不太幸运地弄清楚如何做我想做的事情。

我附上了一张显示我正在尝试使用的布局的图片。

我希望文本按照图像中的方式流动。我在 MS Paint 中制作了这个模型。

每个页面都可以有任何内容，所以我不想手动调整每个页面上的文本。左上角将始终相同，因此理想情况下，我可以添加一个 CSS 规则，无论文本内容实际是什么，它都可以使文本以这种方式表现。

Answer 1

它目前没有得到广泛支持 [96% support在 2022 年] 但你可以使用 shape-outside实现预期效果的CSS声明:

请注意，这只是一个示例，并不是您问题的确切解决方案

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

这将创建一个文本不会进入的三 Angular 形区域(三边形)。 polyfill对于不支持此功能的浏览器，在 github 上可用。

网络上有几篇关于shape-outside 的好文章，特别是在 HTML5 Rocks 上。和 A List Apart .

还有一个similar question on SO几年前有人问过这个问题，可能会有一些用处。

编辑:添加代码片段 - 该示例似乎只在没有 polyfill 的情况下在 Chrome 中运行

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