網頁設計中的平行四邊形
如圖，希望創建一個按鈕狀的平行四邊形鏈接。如果直接用tansform中的skewX()屬性扭曲<a>元素（PS：默認顯示為行內的元素display屬性一定要記得設置為其他值，如：block或inline-block），會導致文字一起被扭曲。有以下解決方案：
嵌套元素方案
可以添加一層div元素包裹內容，再使用skewX()屬性對內容進行反向變形從而抵消容器的變形效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>平行四邊形</title>
<style type="text/css" media="screen">
/*嵌套元素方案*/
.button{
display: block;
margin:0 auto;
padding: .3em;
width: 5em;
font-size: 2em;
text-align: center;
text-decoration: none;
color:#fff;
background: #58a;
transform: skewX(-45deg);
}
.button > div{
transform: skewX(45deg);
}
</style>
</head>
<body>
<!-- 嵌套元素方案 -->
<a href="" class="button">
<div>Click me</div>
</a>
</body>
</html>
使用嵌套元素實現的效果
偽元素方案
將所有樣式（背景、邊框等）應用到偽元素上，然后再對偽元素進行變形。如果希望偽元素保持良好的靈活性，可以自動繼承其宿主元素的尺寸，甚至當宿主元素的尺寸是由其內容來決定時仍然如此。一個簡單的辦法是給宿主元素應用position：relative樣式，并為偽類元素設置position：absolute，然后再把所有偏移量設置為零，以便讓它在水平和垂直方向上都被拉伸至宿主元素的尺寸。
.button{
display: block;
position: relative;
margin:0 auto;
padding: .3em;
width: 5em;
font-size: 2em;
text-align: center;
text-decoration: none;
color:#fff;
}
.button::before{
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skewX(-45deg);
}
