菱形圖片制作

在視覺設(shè)計(jì)中，把圖片裁切為菱形是一種常見的設(shè)計(jì)手法，但在 CSS
中還沒有一種簡(jiǎn)單直觀的方法來實(shí)現(xiàn)它。事實(shí)上，直到最近，這種效果才基
本成為可能。當(dāng)網(wǎng)頁設(shè)計(jì)師想要實(shí)現(xiàn)這種設(shè)計(jì)風(fēng)格時(shí)，他們通常不希望在圖
像處理軟件中預(yù)先把圖片裁好。顯然不用說你也知道，這個(gè)方法的可維護(hù)性
并不好。如果未來有人想修改圖片風(fēng)格，將很難增加其他效果，而且最終往
往會(huì)搞得一團(tuán)糟。
主要的思路與前一篇攻略“平行四邊形”中討論的第一個(gè)解決方案一
致：需要把圖片用一個(gè)<div>包裹起來，然后對(duì)其應(yīng)用相反的 rotate()
變形樣式：

但是，它并沒有一步到位地直接達(dá)到我們期望的效果，除非我們期望的效果是把它裁成一個(gè)八角形——如果是那樣的話，我們就可以到此為止然后去研究點(diǎn)兒別的什么。如果要把圖片裁成一個(gè)
菱形，恐怕還得再費(fèi)一番周折。
主要問題在于 max-width: 100% 這條聲明。 100% 會(huì)被解析為容器（ .picture ）的邊長(zhǎng)。但是，我們想讓圖片的寬度與容器的對(duì)角線相等，而不是與邊長(zhǎng)相等。你可能已經(jīng)猜到了，沒錯(cuò)，我們又要用到勾股定理了（如果你需要復(fù)習(xí)一下，請(qǐng)翻回“斜向條紋”一節(jié)）。這個(gè)定理告訴我們，一個(gè)正方形的對(duì)角線長(zhǎng)度等于它的邊長(zhǎng)乘以 2 1.414 213 562 ≈ 。因此，把 max-width 的值設(shè)置為 2 100% 414.421 356 2% × ≈ 是很合理的，或者把這個(gè)值向上取整為 142% ，因?yàn)槲覀儾幌Ｍ驗(yàn)橛?jì)算的舍入問題導(dǎo)致圖片在實(shí)際顯示時(shí)稍小（但稍大是沒問題的，反正我們都是在裁切圖片嘛）。如果用 scale() 變樣式來把這個(gè)圖片放大，實(shí)際上會(huì)更加合理，原因如下。
1.我們希望圖片的尺寸屬性保留 100% 這個(gè)值，這樣當(dāng)瀏覽器不支持變形樣式時(shí)仍然可以得到一個(gè)合理的布局。
2.通過 scale() 變形樣式來縮放圖片時(shí)，是以它的中心點(diǎn)進(jìn)行縮放的（除非我們額外指定了transform-origin 樣式）。通過 width 屬性來放大圖片時(shí)，只會(huì)以它的左上角為原點(diǎn)進(jìn)行縮放，從而迫使我們
動(dòng)用額外的負(fù)外邊距來把圖片的位置調(diào)整回來。把以上這些分析結(jié)果整合起來，就可以得到以下代碼：

事實(shí)上，我們還有一個(gè)更好的辦法來完成這個(gè)任務(wù)。它的主要思路是使用 clip-path 屬性。這個(gè)特性也是從 SVG 那里借鑒而來，已經(jīng)可以應(yīng)用在 HTML 元素上了（至少對(duì)于支持的瀏覽器來說是這樣的）。而且它的語法也很友好、可讀性不錯(cuò)，完全不像 SVG 里的原版語法那樣會(huì)把人逼瘋。它最大的缺陷在于（在寫作本書時(shí)）其瀏覽器支持程度還很有限。但是，它可以平穩(wěn)退化（只是沒有裁切效果而已），因此它至少有資格成為我們的備選方案。你可能比較熟悉圖像處理軟件（比如 Adobe Photoshop）中的裁切路徑功能。裁切路徑允許我們把元素裁剪為我們想要的任何形狀。在這個(gè)例子
中，我們將會(huì)使用 polygon() （多邊形）函數(shù)來指定一個(gè)菱形。實(shí)際上，它允許我們用一系列（以逗號(hào)分隔的）坐標(biāo)點(diǎn)來指定任意的多邊形。我們甚至可以使用百分比值，它們會(huì)解析為元素自身的尺寸。代碼如下所示：

信不信由你，它就是這么簡(jiǎn)單！它產(chǎn)生的效果跟圖很美，但完全不需要多一層 HTML 標(biāo)簽和八行難以破譯的 CSS 代碼，只需要清清爽爽的一行代碼就可以搞定。clip-path 所能創(chuàng)造的奇跡還不止于此。這個(gè)屬性甚至可以參與動(dòng)畫，只要我們的動(dòng)畫是在同一種形狀函數(shù)（比如這里是 polygon() ）之間進(jìn)行的，而且點(diǎn)的數(shù)量是相同的。因此，如果我們希望圖片在鼠標(biāo)懸停時(shí)平滑地
擴(kuò)展為完整的面積，只需要這樣做：

最后就會(huì)出現(xiàn)令你滿意的效果（默認(rèn)設(shè)置成菱形，鼠標(biāo)懸停時(shí)圖片旋轉(zhuǎn)變成矩形），如下圖所示：

總結(jié)

以上是生活随笔為你收集整理的CSS中实现菱形图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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