gpt4 book ai didi

javascript - 带文字的 CSS 平行四边形

转载 作者:数据小太阳 更新时间:2023-10-29 04:15:51 31 4
gpt4 key购买 nike

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

有没有办法让文本像这样对齐平行四边形的边缘:

enter image description here

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

更新:在寻找一些跨浏览器解决方案后,我发现实现此目的的最简单工具是 this tool.

最佳答案

根据要求,您的答案在于使用 -webkit-shape-in​​side:http://hongkiat.com/blog/css3-content-wrapping

用与平行四边形相匹配的点定义一个多边形,您的内容将适合该形状。

提示:要获得形状的“点”,请从合适的图形设计软件将其导出为矢量,然后在 SVG 中就是坐标。

关于javascript - 带文字的 CSS 平行四边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26778353/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com