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

Question

我试图找出如何让文字在页面上以不规则的形状流动，并且没有太多的运气弄清楚如何做我想做的事情。

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

我希望文本以它在图像中的方式流动。我在MS Paint中做了这个模型。

每个页面上都可以包含任何内容，因此我不必手动调整每个页面上的文本。左上角总是相同的，所以理想情况下我会添加一个CSS规则，无论文本内容实际是什么，都可以使文本以这种方式运行。

Answer 1

目前尚未得到广泛支持，但您可以使用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。

几年前还有一个问similar question on SO，这可能会有所帮助。

修改：添加了代码段 - 该示例似乎只在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>

Answer 2

我使用此在线工具找到了解决方案：http://www.csstextwrap.com/

您使用该网站确定所需的设置，然后将必要的代码复制到您的网站中。