[譯] 如何實現一個對角線佈局

原文連接：Create Diagonal Layouts Like It's 2020，by NILS BINDER

實現對角線佈局有三種方式：

• SVG（參見 Erik Kennedy 的文章）
• CSS clip-path（參見 Sebastiano Guerriero 或 Kilian Valkhof 的文章）
• CSS 轉換

本文講述如何使用 CSS 轉換（對應 transform 屬性）實現對角線佈局效果。

1、HTML 結構

<div class="diagonal-box">
    <div class="content"> ... </div>
</div>
複製代碼

加一點基本的 CSS 樣式：

.diagonal-box {
    background-image: linear-gradient(45deg, #6303B1, #ff0099);
} 
.content { 	
    max-width: 50em;
    margin: 0 auto; 
}
複製代碼

獲得以下的效果：

1、開始轉換

首先想到的是旋轉（rorate）整個容器元素。但帶來的問題是，100% 寬的 .diagonal-box 經旋轉以後，再也不能橫向覆蓋整個視口區域了。爲此，咱們須要增長寬度到 100% 之上來解決這個問題。

還有一個思路是，不用使用旋轉，使用傾斜轉換（skew-transformation）就能實現所需的效果，這個變換效果可能不多人知道。爲了更加精確，咱們僅沿 Y 軸對 .diagonal-box 作傾斜處理。

.diagonal-box {
    background-image: linear-gradient(45deg, #6303B1, #ff0099);
    transform: skewY(-11deg);
}
複製代碼

獲得結果：

3、內部和外部轉換

上面的傾斜效果是對包括內容（.content）在內的整個容器進行的轉換效果。雖然，這個屬性解決了一些問題，但也帶來一些問題。有時候，咱們不想內容也作傾斜。爲此，咱們須要在內容上再作一次反向轉換：

.diagonal-box {
    background-image: linear-gradient(45deg, #654ea3, #eaafc8);
    transform: skewY(-11deg);
}

.content {
    max-width: 50em;
    margin: 0 auto;
    transform: skewY(11deg);
}
複製代碼

效果：

4、使用僞元素

若是內容元素上還包含一些過渡效果（好比，淡入動畫）。那麼咱們在寫這些效果以前，不得不先考慮是否要對元素作反向轉換處理，有點讓人感受煩。幸好還有解決辦法：咱們不對整個容器作偏斜處理，而是用跟容器同樣大的僞元素來作傾斜效果。

.diagonal-box {
    position: relative;
}

.diagonal-box::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(45deg, #654ea3, #eaafc8); 	
    transform: skewY(-11deg);
}

.content {
    max-width: 50em;
    margin: 0 auto;
    position: relative;
}
複製代碼

這裏的 ::before 元素使用了絕對定位。爲此，咱們還須要爲 .diagonal-box、.content 各加一句 position: relative 聲明。爲 .diagonal-box 加，是爲了限制 ::before 是相對與它定位的；爲 .content 加，是由於 ::before 使用絕對定位後，層級變高，會覆蓋 .content 元素，咱們給 .content 加 position: relative 後，就能避免覆蓋了。

來看效果：

5、得體的展現內容

再看一遍上面的效果，發現內容元素超出了偏斜背景的邊界，感受上不是被偏斜背景包圍的，咱們須要加一點 padding。一種方式是在控制檯中反覆調試，但是不夠靈活；另外一種方式，就是深刻研究這裏麪包含的數學規律，計算出精確的 padding 值。看下面這張圖：

根據圖示，a 的寬度是已知的 ，也就是容器寬度。這裏的角度 α 等於咱們在 Y 軸上偏斜度數，即 11°。咱們要求的是直角三角形其中一個直角邊 x 的值。根據公式：

x = tan(α) * a / 2

**
遺憾的是，咱們是沒法在 CSS 計算中作此類計算的。 但這不是一個大問題，在大多數狀況下，偏斜角度基本是保持不變的，所以咱們能夠直接存儲計算出來的值就好了。

6、使用 CSS 變量

經計算，tan(11°) / 2 的結果約等於 0.09719。咱們能夠將它存儲在 CSS 變量中。這樣，代碼能夠更簡單一點：

:root {
    --magic-number: 0.09719; /* tan(11°)/2 */
    --content-width: 100vw;
    --skew-padding: calc(var(--content-width) * var(--magic-number));
}

@media screen and (min-width: 42em) {
    :root {
    	--content-width: 42em;
    }
}
複製代碼

--skew-padding 就是內容元素要應用的 padding 值，它會隨着 --content-width 的改變而動態改變。

除此以外，還能使用 --skew-padding 作別的效果。好比，多個盒子沿着對角線佈局。

7、Demo

codepen.io/enbee81/pen…

點擊上面的連接，便可看見本篇文章中講到的全部相關案例代碼。

感謝閱讀！

（正文完）

---

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個愛貓人士而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

（完）