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

Question

如示例所示，如何使用纯 html 5 和 css 3 实现此目的？主要目标是在自定义形状中用空格包裹文本。

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

Answer 1

你可以照顾这个http://sarasoueidan.com/blog/css-shapes/

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

编辑:

http://demosthenes.info/blog/898/Wrapping-Text-Around-A-Curved-Image-With-CSS-Shapes

我相信有 polyfill

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

脚本: GITHUB REPOSITORY

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

编辑 2:

这是 codepen 示例(不是我制作的 - 现在可以在 codepen 上找到)CODEPEN EXAMPLE