如何實現下圖所示的平行四邊形布局效果？
一、skewX的局限
一提到平行四邊形，條件反射般的就會想起CSS transform中的skew()/skewX()/skewY()方法，可以讓元素斜切，從而實現平行四邊形效果
然而，一開始的布局不僅后面的白色背景形成平行四邊形，整段文字內容也按照平行四邊形的格式進行了排版，如果文字內容也應用skewX，所有文字內容就會表現為傾斜，如下所示：
<div style="width:260px; padding: 10px;transform: skewX(-10deg);border:1px solid #ccc;border-radius:4px;">
我是一段文字內容，我應用了transform屬性中的skewX，看看我現在的表現是怎樣子的……
</div>
我們的預期應該是文字都是正立顯示，而不是這樣子的傾斜。我們可能第一反應是對里面的文字進行反向的skewX，但那需要對每一行文字單獨處理，或者對每一個字符單獨進行處理，成本有些高，不太實際。
這就是skewX方法的局限，那有沒有什么其他方法可以實現平行四邊形的布局效果呢？有，可以借助CSS Shapes布局實現。
二、CSS Shapes布局與三角
然而你就算熟悉了CSS Shapes布局的每一個CSS屬性，這里的平行四邊形布局效果你還不一定會實現得出來，因為需要借助一點逆向思維。
CSS Shapes實現平行四邊形布局的關鍵不在於平行四邊形本身，而在於左上角和右下角的兩個三角形。
HTML結構如下：
<div class="shape-left"></div>
<!-- 右三角 -->
<div class="shape-right"></div>
<content class="content">
<p>內容內容內容內容內容內容內容內容內容內容內</p>
<p>內容內容內容內容內容內容內容內容內容內容內</p>
<p>內容內容內容內容內容內容內容內容內容內容內</p>
<p>內容內容內容內容內容內容內容內容內容內容內</p>
</content>
CSS代碼如下：
.shape-left{
float:left;
width:100px;height:200px;
shape-outside:polygon(0 0,100% 0,0 100%);
}
.shape-right{
float:right;
width:100px;height:200px;
shape-outside:polygon(100% 0,100% 100%,0 100%);
}
.content{
display:block;
}
.content::after{
content:'';
position:absolute;
left:40px;right:40px;
top:0;bottom:80px;
background:#987;
transform:skewX(-20deg);
z-index:-1;
}
實現代碼很簡單，關鍵是思路。
效果：
三、平行四邊形布局與實戰
不規則形狀的廣告更能引起用戶的注意力，從而提高廣告點擊率。
於是對於平行四邊形布局，左上角和右下角的三角空缺正好可以用來放兩個三角形廣告，既充分利用空間，又有高收益。
前端開發通常與公司的業務收入直接關聯不大，但是這里卻不一樣，如果你實現的新穎的布局效果能夠大幅提高公司的收入，證明了你在這一塊的價值，相信對你的績效會很不錯，可以在項目中試一試。
然而實際開發的時候，展示的文字內容有多有少，走平行四邊形並不合適，因為會導致三角很小，或者右下角的三角位置無法確定的問題，因此，推薦實現的布局形狀是下圖這樣子的。
