難題

在視覺設計中，把圖片裁切為棱形是一種常見的手段，這里我們需要實現一下效果

有些同學可能簡單的認為，將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常见效果——棱形图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。