点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
有一个属性，大家应该都见过，或许很熟悉，就是skew。细分有skewX，skewY。借助这个属性实现一个多边形那是相当容易的事。今天小郑先从原理上来分析一下，至于后面要实现的是四边形，梯形等那都好搞。
一、倾斜原理
为了更多的理解和记住这个属性的原理，我花了点时间，画了一张图。
红线框是我倾斜之后的图形（skew(-10deg)），注意了：
第一， 这XY轴和我们平时印象中轴正好相反。往上是X轴，往右是Y轴。
第二，所谓倾斜是宽度和高度是不变的。
第三，X轴向右是负值（向左就是正值）。Y轴向下是正值（向上是负值），两个正好对立。
知道原理了，那画一个多边形，就是小儿科的事情了。下面以四边形为例。
二、四边形为例
transform: skewX(-10deg)
借助伪元素之后，梯形其实也很简单哟！有兴趣可以自行实验。
总结：
本文主要是想说明一点，任何一属性，搞清楚原理之后，应用才会变的更加灵活。才能实现各种有意思的效果，从而形成我们别致的产品。
分享到:
閱讀更多 小鄭搞碼事 的文章
