點擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
有一個屬性，大家應該都見過，或許很熟悉，就是skew。細分有skewX，skewY。藉助這個屬性實現一個多邊形那是相當容易的事。今天小鄭先從原理上來分析一下，至於後面要實現的是四邊形，梯形等那都好搞。
一、傾斜原理
為了更多的理解和記住這個屬性的原理，我花了點時間，畫了一張圖。
紅線框是我傾斜之後的圖形（skew(-10deg)），注意了：
第一， 這XY軸和我們平時印象中軸正好相反。往上是X軸，往右是Y軸。
第二，所謂傾斜是寬度和高度是不變的。
第三，X軸向右是負值（向左就是正值）。Y軸向下是正值（向上是負值），兩個正好對立。
知道原理了，那畫一個多邊形，就是小兒科的事情了。下面以四邊形為例。
二、四邊形為例
transform: skewX(-10deg)
藉助偽元素之後，梯形其實也很簡單喲！有興趣可以自行實驗。
總結：
本文主要是想說明一點，任何一屬性，搞清楚原理之後，應用才會變的更加靈活。才能實現各種有意思的效果，從而形成我們別緻的產品。