gpt4 book ai didi

html - (CSS)倾斜img框架而不扭曲图像

转载 作者:行者123 更新时间:2023-12-04 00:38:54 34 4
gpt4 key购买 nike

我正在制作一个包含许多倾斜元素的网站,如下所示:

enter image description here

这还不错,有一些 CSS 转换可能会扭曲它。但是这个怎么样:

enter image description here

图像没有失真,只是帧被以倾斜的方式裁剪。最简单/最好的方法是什么?

最佳答案

我认为 this应该为你工作。正如 Mark 评论的那样,clip-path 是一个不错的选择。有一些工具可以找到正确的路径,例如 Clippy .获得路径后,将其直接放入代码中。在我的演示中,我在包装图像的 div 上使用了它,而不是在图像本身上。我这样做是为了在图像顶部保留通过伪类添加的边框效果。

enter image description here

演示: http://codepen.io/antibland/pen/eZKxNa

关于html - (CSS)倾斜img框架而不扭曲图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36756081/

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