強大的CSS：實現(xiàn)平行四邊形布局效果

如何實現(xiàn)下圖所示的平行四邊形布局效果？

一、skewX的局限

一提到平行四邊形，條件反射般的就會想起CSS  transform 中的 skew() / skewX() / skewY() 方法，可以讓元素斜切，從而實現(xiàn)平行四邊形效果

HTML如下：

<div class="input-x">
    <input class="input" placeholder="您的姓名">
</div>

CSS如下，形狀的關鍵就是下面紅色高亮的 transform:skewX(-10deg) ：

.input-x {
    display: inline-block;
    position: relative;
    z-index: 0;
}
.input-x::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    border: 2px solid #ddd;
    background-color: #fff;
    border-radius: 4px;
    transform: skewX(-10deg);
    z-index: -1;    
}
.input {
    display: block;
    padding: 8px 10px;
    border: 0; background: none;
}

然而，一開始的布局不僅后面的白色背景形成平行四邊形，整段文字內(nèi)容也按照平行四邊形的格式進行了排版，如果文字內(nèi)容也應用 skewX ，所有文字內(nèi)容就會表現(xiàn)為傾斜，如下所示：

我是一段文字內(nèi)容，我應用了transform屬性中的skewX，看看我現(xiàn)在的表現(xiàn)是怎樣子的……

我們的預期應該是文字都是正立顯示，而不是這樣子的傾斜。我們可能第一反應是對里面的文字進行反向的 skewX ，但那需要對每一行文字單獨處理，或者對每一個字符單獨進行處理，成本有些高，不太實際。

這就是 skewX 方法的局限，那有沒有什么其他方法可以實現(xiàn)平行四邊形的布局效果呢？有，可以借助CSS Shapes布局實現(xiàn)。

二、CSS Shapes布局與三角

然而你就算熟悉了CSS Shapes布局的每一個CSS屬性，這里的平行四邊形布局效果你還不一定會實現(xiàn)得出來，因為需要借助一點逆向思維。

CSS Shapes實現(xiàn)平行四邊形布局的關鍵不在于平行四邊形本身，而在于左上角和右下角的兩個三角形。

HTML結構如下：

<!-- 左三角 -->
<div class="shape-left"></div>
<!-- 右三角 -->
<div class="shape-right"></div>
<content class="content">
   ...內(nèi)容...
</content>

我們查看下布局盒子，可見端倪：

.shape-left 元素左浮動同時設置 shape-outside 為倒三角， .shape-right 元素右浮動同時設置 shape-outside 為正三角，此時， <content> 元素里面的文字內(nèi)容就自動在剩余空間環(huán)繞排版，形成平行四邊形布局效果。

相關CSS代碼如下：

.shape-left {
    float: left;
    width: 200px; height: 500px;
    /* 倒三角 */
    shape-outside: polygon(0 0, 100% 0, 0% 100%);
}
.shape-right {
    float: right;
    width: 200px; height: 500px;
    /* 正三角 */
    shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}
.content {
    display: block;
}

效果即達成。

實現(xiàn)代碼很簡單，關鍵是思路。

三、平行四邊形布局與實戰(zhàn)

不規(guī)則形狀的廣告更能引起用戶的注意力，從而提高廣告點擊率。

于是對于平行四邊形布局，左上角和右下角的三角空缺正好可以用來放兩個三角形廣告，既充分利用空間，又有高收益。

前端開發(fā)通常與公司的業(yè)務收入直接關聯(lián)不大，但是這里卻不一樣，如果你實現(xiàn)的新穎的布局效果能夠大幅提高公司的收入，證明了你在這一塊的價值，相信對你的績效會很不錯，可以在項目中試一試。

然而實際開發(fā)的時候，展示的文字內(nèi)容有多有少，走平行四邊形并不合適，因為會導致三角很小，或者右下角的三角位置無法確定的問題，因此，推薦實現(xiàn)的布局形狀是下圖這樣子的。

四、結束語

以后遇到不規(guī)則形狀布局，要有條件反射般的思維——CSS Shapes布局。

CSS Shapes布局兼容性已經(jīng)相當不錯了，移動端可以放心使用。為了避免污染極少部分老舊手機，我們可以這么處理：

@supports (shape-outside: none) {
   /* CSS Shapes相關代碼寫在這里 */
}

這樣，老舊手機依然是布局良好的傳統(tǒng)塊狀布局，大多數(shù)手機可以享用新式布局帶來的美味。

自己是一個五年的前端工程師,希望本文對你有幫助！

這里推薦一下我的前端學習交流扣qun：731771211 ，里面都是學習前端的，如果你想制作酷炫的網(wǎng)頁，想學習編程。自己整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設計模式】到移動端HTML5的項目實戰(zhàn)的學習資料都有整理，送給每一位前端小伙伴，每天分享技術