css平行四邊形與菱形變換

最後更新：2016-11-30 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

*以下技巧均源自於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"></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"></body></html>

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



本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More