Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/39.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 带文本的CSS平行四边形_Javascript_Css_Canvas - Fatal编程技术网
Fatal编程技术网
  • javascript/
  • Javascript 带文本的CSS平行四边形

Javascript 带文本的CSS平行四边形

javascript css canvas

Javascript 带文本的CSS平行四边形,javascript,css,canvas,Javascript,Css,Canvas,我已经使用CSS3的skew转换创建了一个平行四边形，并将文本放置在另一个具有相反skew值的div中，以便文本保持未转换状态： 有没有办法使文本与平行四边形的边对齐，如下所示： 我愿意接受其他建议，例如如果不能使用CSS，可以使用canvas。如果有一种JavaScript技术可以做到这一点，那么任何可能有用的链接都将不胜感激 更新：在寻找了一些跨浏览器解决方案之后，我发现实现这一点的最简单工具是根据要求使用，您的答案在于使用-webkit shape inside： 使用与平行四边形匹配的

我已经使用CSS3的
skew
转换创建了一个平行四边形，并将文本放置在另一个具有相反
skew
值的div中，以便文本保持未转换状态：

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

我愿意接受其他建议，例如如果不能使用CSS，可以使用
canvas
。如果有一种JavaScript技术可以做到这一点，那么任何可能有用的链接都将不胜感激

更新：在寻找了一些跨浏览器解决方案之后，我发现实现这一点的最简单工具是根据要求使用

，您的答案在于使用
-webkit shape inside
：

使用与平行四边形匹配的点定义一个
多边形
，内容将适合该形状

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

我认为您应该尝试将文本旋转为：@VickyGonsalves-问题是它明显扭曲了内容too@DeeMac伟大的发现！你能把这句话写进其他人的答案里吗？他们正在寻找和我一样的东西？我花了几个小时尝试不同的搜索词，结果没有发现任何有用的东西。更新问题中的链接不再有效。虽然有效，但我要补充的是，目前浏览器对
内
形状的支持有限。截至2019年，91%的浏览器支持CSS形状，不支持IE/Edge/Opera Mini，但大多数sane浏览器版本都支持。