将文本包裹在自定义形状中

Question

如何使用纯 html 5 和 css 3 实现这一点，如示例所示？主要目标是在自定义形状中用空格换行文本。

我想象如何使用 javascript，但这是错误的方式。

Answer 1

.shaped{
    /*...*/
    shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
    shape-margin: 20px;
}

编辑：

我相信有 polyfill

<script src="shapes-polyfill.min.js"></script>

但是我没有亲自检查所以不能给你100%的肯定..

编辑 2：

这是 codepen 示例（不是我制作的 - 现在在 codepen 上找到）CODEPEN EXAMPLE

wrap text in custom shapes