傾斜角，是指一個(gè)區(qū)域它的頂部或底部邊緣不是完全水平而是傾斜的。本文和大家介紹的就是使用Sass實(shí)現(xiàn)傾斜角度的方法，希望可以幫助大家更好的學(xué)習(xí)Sass，一起來看看吧。

　實(shí)現(xiàn)這種效果有很多種方法。例如可以將 base64 編碼的圖片應(yīng)用為背景，但這會(huì)使得它很難自定義（顏色，角度等）。

　　另一種方法是傾斜或旋轉(zhuǎn)絕對(duì)定位的偽元素，然而傾斜變換是我最不愿意處理的一件事。

　　使用Sass時(shí)，可以使用動(dòng)態(tài)編碼生成SVG的 Angled Edges 庫(kù)。它能很好的工作，但它需要一個(gè)以像素表示的固定寬度和高度，這使我感到有點(diǎn)困擾。

　　我也真的想知道自己是否能實(shí)現(xiàn)和如何實(shí)現(xiàn)傾斜角效果。最終我得到了一個(gè)自己為之自豪的解決方法，哪怕它可能為簡(jiǎn)單場(chǎng)景有點(diǎn)過度設(shè)計(jì)。

　　是什么樣的方法呢？

　　我的想法是對(duì)絕對(duì)定位的偽元素使用半透明，一半實(shí)心的漸變。漸變的角度定義了傾斜的角度。

background-image: linear-gradient($angle, $color 50%, transparent 50%);

　　代碼被封裝在一個(gè)mixin里面，它將背景顏色應(yīng)用到容器中，并基于給定角度生成一個(gè)具有正確漸變的偽元素。很簡(jiǎn)單，可以這樣使用：

　　.container {

　　@include tilted($angle: 3deg, $color: rgb(255, 255, 255));

　　}

　　我面臨的主要問題是計(jì)算偽元素的高度。起初，我把它作為mixin的參數(shù)，為了計(jì)算偽元素的最佳高度而在每一個(gè)新角度經(jīng)歷了嘗試-錯(cuò)誤后，最后放棄了。不理想。

　　正當(dāng)我準(zhǔn)備翻盤整個(gè)事情，為了弄清背后的公式，我決定遠(yuǎn)離筆記本，帶上紙筆開始涂鴉。我花了一段時(shí)間（和一些谷歌搜索）去回憶高中學(xué)過的三角數(shù)學(xué)，最后我做到了。

　　為了避免猜想或提出接近的近似值，偽元素的高度是從給定角度計(jì)算得來的。當(dāng)然，這一切都是用一點(diǎn)Sass和大量幾何完成的。

　　計(jì)算偽元素的高度

　　相信我所說的，這不會(huì)太難。我們知道的第一件事是，我們擁有一個(gè)全寬的偽元素。漸變線會(huì)成為偽元素的對(duì)角線，我們最后得到一個(gè)矩形三角形。

　　我們將其命名為 ABC ， C 是直角， B 是已知角度（參數(shù) $angle ），因此 A=C-B。如圖所示，我們嘗試計(jì)算出 b 的長(zhǎng)度。

為此，我們需要求出 c 的值（漸變線，又稱斜邊），它是 a 的長(zhǎng)度值除以 A 角的正弦值（如 B=5° ，則 A=85° ）。

c = a / sin(C - B)

　　接下來，我們必須使用畢達(dá)哥拉斯定理（勾股定理）：

　　斜邊（與直角相對(duì)的一邊）邊長(zhǎng)的平方等于其他兩邊邊長(zhǎng)的平方和。

　　因此，另一邊的平方等于斜邊的平方減去第三條邊的平方。所以 b 的平方等于 c的平方減去 a 的平方。

b2 = c2 - a2

　　最后， b 的長(zhǎng)度等于 c 的平方減去 a 的平方的平方根

b = √(c2 - a2)

　　就是這樣。現(xiàn)在我們可以編寫一個(gè)小的Sass函數(shù)，根據(jù)給定角度計(jì)算偽元素高度。

@function get-tilted-height($angle) {

$a: (100% / 1%);

$A: (90deg - $angle);

$c: ($a / sin($A));

$b: sqrt(pow($c, 2) - pow($a, 2));

@return (abs($b) * 1%);

}

　　注意： pow() , sqrt() , sin() 函數(shù)來自 Sassy-Math , Compass or custom sources 。

編寫實(shí)現(xiàn)傾斜的混合宏

　　相信我，我們已經(jīng)完成了最難的部分。最后要做的是編寫實(shí)際的 tilted() 混合宏。它接收一個(gè)角度和一個(gè)顏色值，并生成偽元素。

@mixin tilted($angle, $color) {

$height: get-tilted-height($angle);

position: relative;

background-color: $color;

&::before {

content: '';

padding-top: $height;

position: absolute;

left: 0;

right: 0;

bottom: 100%;

background-image: linear-gradient($angle, $color 50%, transparent 50%);

}

}

　　這里要注意幾點(diǎn)：混合宏對(duì)應(yīng)容器應(yīng)用了 position:relative ，這為偽元素定義了位置環(huán)境。當(dāng)絕對(duì)定位或固定定位的元素使用這個(gè)混合宏時(shí)，也許應(yīng)該考慮從混合宏中移除這個(gè)聲明。

　　這個(gè)混合宏將背景顏色同時(shí)應(yīng)用到容器本身及偽元素的漸變，因?yàn)樗鼈儽仨毻健?/span>

　　最后，偽元素的高度必須通過 padding-top （或 padding-bottom ）而不是 height 來傳遞。由于高度是基于父元素寬度的百分比來表示的，不能依賴 height （因?yàn)樗歉鶕?jù)父元素的高度來計(jì)算的）。

總結(jié)和進(jìn)一步探討

　　在本文中，我選擇了一個(gè)簡(jiǎn)單的版本的混合宏，這可能缺乏靈活性，但從理論上講，它可能存在以下問題：

· 不能在一個(gè)已被占用的 ::before 偽元素使用。這時(shí)可以通過增加一個(gè)可選參數(shù)來指定偽元素，默認(rèn)為 before

· 不能在容器的底部顯示一個(gè)傾斜角度，因?yàn)?nbsp;bottom:0 目前已經(jīng)在mixin 核心里硬編碼。這可以通過傳遞額外的位置到mixin來解決。

此外，我現(xiàn)有的版本使用基于Sass的數(shù)學(xué)函數(shù)，因?yàn)樗窃?/span>Jekyll項(xiàng)目，不允許我擴(kuò)展Sass層。如果使用node-sass，你可以輕而易舉地通過Eyeglass 或 Sassport 將這些函數(shù)從JavaScript傳遞到Sass。這樣做無疑更好。

文章來源：W3CPlus