難題

在視覺(jué)設(shè)計(jì)中，把圖片裁切為棱形是一種常見(jiàn)的手段，這里我們需要實(shí)現(xiàn)一下效果

有些同學(xué)可能簡(jiǎn)單的認(rèn)為，將container旋轉(zhuǎn)45deg就ok了，但是你們想過(guò)沒(méi)有，容器旋轉(zhuǎn)了45deg，圖片也會(huì)跟著旋轉(zhuǎn)45deg；又有同學(xué)說(shuō)，那我把圖片再旋轉(zhuǎn)-45deg，不就行了嗎，但是真的可以實(shí)現(xiàn)嗎?
錯(cuò)誤的代碼：

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

錯(cuò)誤的效果：

所以，不是那么簡(jiǎn)單的。
我們來(lái)思考一個(gè)問(wèn)題，那就是我們?cè)O(shè)置了overflow: hidden將圖片旋轉(zhuǎn)-45deg之外的部分裁剪掉了，那么圖片的長(zhǎng)度就不是那么長(zhǎng)了，我們就需要將圖片的長(zhǎng)度恢復(fù)到多大才能填充到圖片那么大呢？
相信不少同學(xué)都開(kāi)始算數(shù)學(xué)，告訴你們其實(shí)需要將圖片放大1.414倍（根號(hào)二），其實(shí)這是一個(gè)簡(jiǎn)單的數(shù)學(xué)問(wèn)題，具體的細(xì)節(jié)就需要各位畫(huà)個(gè)草圖解答。
接下來(lái)我們只需要將圖片變?yōu)樵瓉?lái)的1.414倍就可以了

.pic > img {max-width: 200px;height: 200px;/* 將圖片大小變?yōu)樵瓉?lái)的1.414倍撐滿(mǎn)整個(gè)container */transform: rotate(-45deg) scale(1.414);}

效果圖如下：

總結(jié)

以上是生活随笔為你收集整理的css常见效果——棱形图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。