Question

我尝试了以下内容：

<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中，所有东西都是盒子。

然而有可能。这两篇文章here和here会详细说明。首先，使用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%);
}

我们可以看到它很简单，形状定义为多边形，它的行为与任何其他块一样，除了它有多边形边缘而不是块边缘。然后浮动元素将导致文本在其周围流动。

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

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

我建议您使用css形状作为默认设置并让新浏览器处理它（Firefox很快就会赶上我确定）但提供某种类似Modernizr的browser feature detection method来决定是否或不应用将两个部分显示为没有倾斜的块的回退。

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

1 个答案: