带文本的CSS平行四边形

Question

我使用CSS3的skew变换制作了一个平行四边形,并将文本放在另一个具有相反skew值的div中,以便文本保持未变换状态:JSFiddle示例.

有没有办法让文本与平行四边形的边缘对齐,如下所示:

我愿意接受其他建议,例如使用canvasif,如果不能使用CSS.如果有一种JavaScript技术可以做到这一点,那么任何可能有用的链接都将受到赞赏.

更新:在寻找一些跨浏览器解决方案之后,我发现实现这一目标的最简单的工具就是使用这个工具.

Answer 1

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

使用polygon与平行四边形匹配的点定义a ,您的内容将适合该形状.

提示:要获得形状的"点",请将其作为矢量从合适的图形设计软件导出,并在SVG中作为坐标.