Html 如何在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 DOL
div{
宽度：280px；
高度：280px；
背景：#1e90ff；
-webkit剪辑路径：多边形（0,78%0,93%99,0%100%）；
剪辑路径：多边形（0,78%0,93%99,0%100%）；
填充：15px
}
/*演示中心*/
html，正文{高度：100%；}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

我想要的是，div中的文本在到达边界时得到换行符。 这怎么可能

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

---

有没有可能通过SVG实现这一点？

单凭剪辑路径无法实现这一点

剪辑路径将应用于元素，而不管其内容如何。它是元素外部边界的定义，但定义了元素如何在其边界内剪裁，所以文本的行为并不像您所期望的那个样。它仍然要求元素是长方体，因为当前在css中，所有的东西都是长方体

然而，这是可能的。这两篇文章将详细介绍。首先，使用css形状声明定义元素。然后，使用与多边形定义具有相同定义的剪裁路径来剪裁影响形状的任何背景

摘自第一篇文章（非常接近您想要的内容）：

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

下面是一个示例*（

-webkit-

前缀是必需的，像谷歌浏览器这样的webkit浏览器也是如此）。通过查看*，在应用

剪辑路径之前，您可以了解为什么需要这样做。在我的示例中，
.shaped
和
.text
都保存在同一个容器中，但作为兄弟。文本围绕其同级循环，而不是展开以填充其容器。容器本身和背景色的使用在实体模型中实现了这种效果。（您可能需要调整JSFIDLE面板的大小以挤压或拉伸物体，并清楚地看到效果）

不幸的是，css形状非常新鲜。快速浏览一下就会发现，目前仅有一半的浏览器支持这些功能。即使Firefox在当前版本中也没有任何实现。至于IE

我建议您使用css形状作为默认形状，并让新浏览器处理（我相信Firefox很快就会赶上），但提供类似Modernizer的功能，以决定是否应用回退功能，将两个部分显示为没有倾斜的块。
我从未见过类似的情况。好奇（也许我们可以给你提供另一种可能性），你为什么想要这个？我想要这样的东西：这是我新主页的一个模型。SVG可以用来定义一个元素，但不能改变元素的长方体
<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;
}

.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%);
}