用自定义形状包装文本

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