css平行四邊形與菱形變換

平行四邊形

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

 
 
 


 
click

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

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

 
 
 


 
click

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

菱形圖片

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

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

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

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

　　這個構造菱形的方案有一個缺陷，就是當原圖不是正方形就需要使用更大的放大系數，截取的圖片內容就更有限了。

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

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

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