css平行四邊形與菱形變換
- 高洛峰原創
- 2016-11-30 16:01:242140瀏覽
*以下技巧皆源自於Lea Verou所著《CSS Secrets》
平行四邊形
平行四邊形的構造可以基於矩形透過skew()的變形屬性進行斜向拉升得到（skew所用的座標系，縱向是X軸，橫向是Y軸，與常見的座標系相反）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.location{
position: relative;
top: 150px;
left: 150px;
}
.button{
color: white;
background-color: #51bfff;
width: 120px;
height: 50px;
line-height: 50px;
text-align: center;
transform: skewX(-45deg);
}
</style>
</head>
<body>
<div class="location button">click</div>
</body>
</html>
但是內容傾斜可能不是我們所需要的效果，一種常規的解決方案就是在內層嵌套一個div，然後加上一個反方向的拉升transform: skewX(45deg);但是有代碼潔癖的人表示接受不能。
另一種思路是將所有樣式應用到偽元素上。然後再對偽元素進行變形。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.location{
position: relative;
top: 150px;
left: 150px;
}
.button{
width: 120px;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
}
.button:before{
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: #51bfff;
transform: skewX(-45deg);
z-index: -1;
}
</style>
</head>
<body>
<div class="location button">click</div>
</body>
</html>
這樣不但解決了內容傾斜的問題，而且html結構還是和之前一樣乾淨。不過要注意偽元素生成的圖案是重疊在內容之上的，一旦為它設定背景，就會遮住內容，所以要加上z-index: -1。
菱形圖片
如果是在正方形的基礎之上，菱形就是正方形圖案旋轉45度的圖形。我們很容易想到將外層div旋轉45度再將內層img反向旋轉45度。得到如下的圖案。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.location{
position: relative;
top: 150px;
left: 150px;
}
.picture{
width: 600px;
transform: rotate(45deg);
overflow: hidden;
}
.picture>img{
max-width: 100%;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="location picture"><img src="1.jpeg" alt="css平行四邊形與菱形變換" ></div>
</body>
</html>
是個挺漂亮的正八邊形呢，如果你能說服產品經理，那工作也算完成啦。好吧，我猜你不能說服。 。 。
這裡由於旋轉方向不一致，外層div截取了超出的部分（注意overflow:hidden），然後一部分又空出來了。只要填滿空出的部分就是菱形啦，這裡你可以畫個草圖用勾股定理算一算。
算出的結果是放大1.42倍填充完全。我們在img的transform屬性改為transform: rotate(45deg) scale(1.42);得到下圖：
這個構造菱形的方案有一個缺陷，就是當原圖不是正方形就需要使用更大的放大係數，截取的圖片內容就更有限了。
而且方案本身也不算簡潔優雅。這裡向大家介紹一個屬性clip-path（遺憾的是支持性似乎並不好），它可以透過傳入固定的位置點將圖片裁剪成任意的多邊形。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.location{
position: relative;
top: 150px;
left: 150px;
}
.picture{
-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
-moz-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
transition: 1s clip-path;
}
</style>
</head>
<body>
<img class="location picture" src="1.jpeg" alt="css平行四邊形與菱形變換" >
</body>
</html>
希望在不遠的將來clip-path這個屬性在各遊覽器得到更好的支援。