如何在div中使用带有文本的clip-path？

Question

我尝试了以下方法:

http://codepen.io/anon/pen/YXePBY

<div>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</div>

div {
    width: 280px;
    height: 280px;
    background: #1e90ff;
    -webkit-clip-path: polygon(0 0, 78% 0, 93% 99%, 0% 100%);
  clip-path: polygon(0 0, 78% 0, 93% 99%, 0% 100%);
  padding: 15px
}

/* Center the demo */
html, body { height: 100%; }
body {
    display: flex;
    justify-content: center;
    align-items: center;
}

我想要的是,div中的文本到达边界时会有一个换行符.这怎么可能？

以及如何获得最高的浏览器兼容性？

有没有办法用SVG制作这个？

Answer 1

您不能单独使用剪辑路径来做到这一点。

无论元素的内容如何，​​剪辑路径都会应用于元素。它是元素外部边界的定义，但定义了元素如何在其边界内剪切，因此文本的行为与您预期的不同。它仍然要求元素是一个盒子，因为目前在 css 中，所有的东西都是盒子。

然而这是可能的。这里和这里的这两篇文章详细介绍了所需的细节。首先，您使用 css 形状声明定义一个元素。然后使用与多边形定义具有相同定义的剪辑路径来剪掉影响形状的任何背景

摘自第一篇文章（并且方便地接近您想要的内容）：

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

我们可以看到它非常简单，形状被定义为多边形，它的行为与任何其他块一样，只是它具有多边形边缘而不是块边缘。浮动元素将导致文本围绕它流动。

这是JSFiddle *的示例（-webkit-需要前缀，WebKit 浏览器如 Google Chrome 也是如此）。通过查看这个 JSFiddle *, before clip-pathis applied ，您可以了解为什么它是必要的。在我的示例中，.shaped和.text都保存在同一个容器中，但作为兄弟姐妹。文本围绕它的同级流动而不是扩展以填充它的容器。容器本身和背景颜色的使用实现了模型中的效果。（您可能需要调整 JSFiddle 面板大小以挤压或拉伸事物并清楚地看到效果）。

不幸的是，css 形状非常新鲜。快速浏览caniuse.com 会发现目前只有一半的浏览器支持这些。甚至 Firefox 在当前版本中也根本没有实现。至于IE...

我建议您使用 css 形状作为默认设置，让新浏览器处理它（我相信 Firefox 很快会赶上来），但提供某种浏览器功能检测方法，例如 Modernizr 来决定是否应用后备将两个部分显示为没有倾斜的块。