带文本的CSS平行四边形

Question

我使用CSS3＆＃39; skew转换制作了一个平行四边形，并将文本放在另一个具有相反skew值的div中，以便文本保持未转换状态： JSFiddle example

有没有办法让文字与平行四边形的边缘对齐，如下所示：

我可以接受其他建议，例如使用canvas，如果使用CSS无法实现。如果有一种JavaScript技术可以做到这一点，那么任何可能有用的链接都会受到赞赏。

更新：在寻找一些跨浏览器解决方案后，我发现实现这一目标的最简单工具是 this tool 。

Answer 1

根据要求，您的答案取决于-webkit-shape-inside：http://hongkiat.com/blog/css3-content-wrapping

的使用

使用与您的平行四边形匹配的点定义polygon，您的内容将符合该形状。

提示：要获得形状的“点”，请将其从适当的图形设计软件导出为矢量，并在SVG中将其作为坐标。