Css 包含不规则形状内的文本

在不规则形状的框架中包含文本

我正在尽可能以最灵敏、向后兼容的方式实现以下目标。我很感激我可能需要在某个地方做出重大妥协

多亏了以下几点，svg背景不会随着包含的文本或视图端口而调整大小，这也是我考虑过的

如果我有一个div块，它有一个边界，这会更好。然而，我能把左下角和右下角带进来吗

完整代码如下：

.集装箱{ 位置：相对位置； 宽度：1800px； 高度：400px； 保证金：1.5雷姆； 填充：1.5雷姆； 框大小：边框框； } .文本{ 位置：绝对位置； 排名：0； 左：0； 显示：块； 宽度：1800px； 高度：400px； z指数：2； 填充：3rem 3rem； } .形状{ 宽度：50%； 身高：85%； } .左{ 外形：多边形0,11%98%，50%100%，10%100%； 浮动：左； } .对{ 外部形状：多边形100%0、99%98%、50%100%、100%100%； 浮动：对； } h1{ 字体大小：3rem； 文本对齐：居中； 最高保证金：-2.75雷姆； } 跨度{ 背景：fff； 填充：02rem； 位置：相对位置； z指数：1； } p{ 字号：2rem； } 啤酒酵母 我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。这是一个很好的例子。梅塞纳斯·福西布斯·莫利斯·因特杜姆。Donec sed odio dui。埃尼安·尤利奥·夸姆。威尼斯人前庭的佩伦茨克ornare sem lacinia quam。克拉斯 马蒂斯·康斯特特·普鲁斯坐在发酵罐里。塞德·波苏尔·康塞泰特在洛博蒂斯。Donec在eget metus为非mi porta孕妇确定了最佳身份。Donec在eget metus为非mi porta孕妇确定了最佳身份

你可以在这里用。只需将其应用于父对象，然后将相反的效果应用于子对象。这样，较旧的浏览器将只显示一个方形背景，+响应将不会是一个问题

.集装箱{ 字体系列：Monospace； 边框：3倍纯黑； 文本对齐：居中； 填充：0 20px； 变换：透视10px旋转-0.3deg； 边界半径：8px； 最大宽度：600px； } .货柜组{ 变换：透视10px旋转0.3deg； } 氢{ 显示：内联块； 填充：0 10px； 背景色：fff； 利润率：-10px0； } 有什么区别？工艺与工厂 我正在尽可能以最灵敏、向后兼容的方式实现以下目标。我很感激我可能需要在某个地方做出重大妥协

---

你们可以通过变换倾斜来实现倾斜的角落，这里的例子听起来很完美，我们将对此进行研究，非常感谢@Huangism@Huangism我不认为非扭曲的内容会遵守扭曲容器的界限。不过我可以只玩填充，当然看起来比我第一次尝试它更有希望…@zgood它不会服从它，就像它没有倾斜一样，但你只需要用%填充动态调整它，它最终会到达那里