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

成都創(chuàng)新互聯(lián)公司主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁視覺設(shè)計(jì)、VI標(biāo)志設(shè)計(jì)、成都全網(wǎng)營銷、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式網(wǎng)站建設(shè)、手機(jī)網(wǎng)站開發(fā)、微商城、網(wǎng)站托管及成都網(wǎng)站改版、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計(jì)、SEO優(yōu)化排名。設(shè)計(jì)、前端、后端三個建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為成都電動窗簾行業(yè)客戶提供了網(wǎng)站設(shè)計(jì)服務(wù)。

一、skewX的局限

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

HTML如下：

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

CSS如下，形狀的關(guān)鍵就是下面紅色高亮的 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)容也按照平行四邊形的格式進(jìn)行了排版，如果文字內(nèi)容也應(yīng)用 skewX ，所有文字內(nèi)容就會表現(xiàn)為傾斜，如下所示：

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

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

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

二、CSS Shapes布局與三角

然而你就算熟悉了CSS Shapes布局的每一個CSS屬性，這里的平行四邊形布局效果你還不一定會實(shí)現(xiàn)得出來，因?yàn)樾枰柚稽c(diǎn)逆向思維。

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

HTML結(jié)構(gòu)如下：

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

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

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

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

效果即達(dá)成。

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

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

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

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

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

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

四、結(jié)束語

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

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

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

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

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

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

當(dāng)前標(biāo)題：強(qiáng)大的CSS：實(shí)現(xiàn)平行四邊形布局效果
文章出自：http://chinadenli.net/article40/gjegeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、外貿(mào)網(wǎng)站建設(shè)、虛擬主機(jī)、云服務(wù)器、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)