強大的CSS：實現平行四邊形佈局效果

如何實現下圖所示的平行四邊形佈局效果？

一、skewX的侷限

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

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;
}

---

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

我是一段文字內容，我應用了transform屬性中的skewX，看看我現在的表現是怎樣子的……

我們的預期應該是文字都是正立顯示，而不是這樣子的傾斜。我們可能第一反應是對裡面的文字進行反向的 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">
   ...內容...
</content>

我們檢視下佈局盒子，可見端倪：

.shape-left 元素左浮動同時設定 shape-outside 為倒三角， .shape-right 元素右浮動同時設定 shape-outside 為正三角，此時， <content> 元素裡面的文字內容就自動在剩餘空間環繞排版，形成平行四邊形佈局效果。

相關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;
}

效果即達成。

實現程式碼很簡單，關鍵是思路。

三、平行四邊形佈局與實戰

不規則形狀的廣告更能引起使用者的注意力，從而提高廣告點選率。

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

前端開發通常與公司的業務收入直接關聯不大，但是這裡卻不一樣，如果你實現的新穎的佈局效果能夠大幅提高公司的收入，證明了你在這一塊的價值，相信對你的績效會很不錯，可以在專案中試一試。

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

四、結束語

以後遇到不規則形狀佈局，要有條件反射般的思維——CSS Shapes佈局。

CSS Shapes佈局相容性已經相當不錯了，移動端可以放心使用。為了避免汙染極少部分老舊手機，我們可以這麼處理：

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

這樣，老舊手機依然是佈局良好的傳統塊狀佈局，大多數手機可以享用新式佈局帶來的美味。

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

這裡推薦一下我的前端學習交流扣qun：731771211 ，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，每天分享技術

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2645233/，如需轉載，請註明出處，否則將追究法律責任。