平行四邊形

　　平行四邊形的構(gòu)造可以基于矩形通過skew()的變形屬性進行斜向拉升得到（skew所用的坐標系，縱向是X軸，橫向是Y軸，與常見的坐標系相反）。

 
 
 


 
click

　　但是內(nèi)容傾斜可能不是我們所需要的效果，一種常規(guī)的解決方案就是在內(nèi)層嵌套一個div，然后加上一個反方向的拉升transform: skewX(45deg);但是有代碼潔癖的人表示接受不能。

　　另一種思路是將所有樣式應(yīng)用到偽元素上。然后再對偽元素進行變形。

 
 
 


 
click

　　這樣不但解決了內(nèi)容傾斜的問題，而且html結(jié)構(gòu)還是和之前一樣干凈。不過要注意偽元素生成的圖案是重疊在內(nèi)容之上的，一旦給它設(shè)置背景，就會遮住內(nèi)容，所以要加上z-index: -1。

菱形圖片

　　如果是在正方形的基礎(chǔ)之上，菱形就是正方形圖案旋轉(zhuǎn)45度的圖形。我們很容易想到將外層div旋轉(zhuǎn)45度再將內(nèi)層img反向旋轉(zhuǎn)45度。得到如下的圖案。

　　是個挺漂亮的正八邊形呢，如果你能說服產(chǎn)品經(jīng)理，那工作也算完成啦。好吧，我猜你不能說服。。

　　這里由于旋轉(zhuǎn)方向不一致，外層div截取了超出的部分（注意overflow:hidden），然后一部分又空出來了。只要填充完空出的部分就是菱形啦，這里你可以畫個草圖用勾股定理算一算。

　　算出的結(jié)果是放大1.42倍填充完全。我們在img的transform屬性改為transform: rotate(45deg) scale(1.42);得到下圖：

　　這個構(gòu)造菱形的方案有一個缺陷，就是當原圖不是正方形就需要使用更大的放大系數(shù)，截取的圖片內(nèi)容就更有限了。

　　而且方案本身也不算簡潔優(yōu)雅。這里向大家介紹一個屬性clip-path（遺憾的是支持性似乎并不好），它可以通過傳入固定的位置點將圖片裁剪成任意的多邊形。

　　希望在不遠的將來clip-path這個屬性在各游覽器得到更好的支持。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com