css常见效果——棱形图片

难题

在视觉设计中，把图片裁切为棱形是一种常见的手段，这里我们需要实现一下效果

有些同学可能简单的认为，将container旋转45deg就ok了，但是你们想过没有，容器旋转了45deg，图片也会跟着旋转45deg；又有同学说，那我把图片再旋转-45deg，不就行了吗，但是真的可以实现吗?
错误的代码：

.pic {width: 200px;transform: rotate(45deg);overflow: hidden;margin: 100px auto;}.pic > img {max-width: 200px;height: 200px;transform: rotate(-45deg); }

错误的效果：

所以，不是那么简单的。
我们来思考一个问题，那就是我们设置了overflow: hidden将图片旋转-45deg之外的部分裁剪掉了，那么图片的长度就不是那么长了，我们就需要将图片的长度恢复到多大才能填充到图片那么大呢？
相信不少同学都开始算数学，告诉你们其实需要将图片放大1.414倍（根号二），其实这是一个简单的数学问题，具体的细节就需要各位画个草图解答。
接下来我们只需要将图片变为原来的1.414倍就可以了

.pic > img {max-width: 200px;height: 200px;/* 将图片大小变为原来的1.414倍撑满整个container */transform: rotate(-45deg) scale(1.414);}

效果图如下：

总结

以上是生活随笔为你收集整理的css常见效果——棱形图片的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。