在一些比較酷的**上，看到人家的導航欄有乙個個平行四邊形組成，在配合一些好的顏色，科技感還是蠻足的。常用的方法是通過skew（）的變形屬性來完成。該方法主要有三種情況，
skewx() 該方法會保持高度，沿著x軸傾斜
skewy() 該方法會保持寬度，沿著y軸傾斜
skew(x,y) 該方法先由x軸傾斜，再由y軸傾斜
直接對乙個div進行skew操作，使其成為平行四邊形，這樣會導致其內容也跟著變形，解決方案有兩種，通過巢狀元素和偽元素來解決。
巢狀元素方案是通過給div再巢狀乙個div，外部使用skew方法使其成為平行四邊形，內部div在應用一次反向的skew變形，從而抵消容器的變形效果。
click me
偽元素方案，這種方式是通過給元素設定個：：before，變形樣式都設定在該偽類上，然後通過相對定位來設定該偽元素的位置。
.button.button::beforeclick me
這種方案巧妙在於這個平行四邊行的大小是根據父元素來的，自適應父元素的大小的。原理就在於在絕對定位中設定了子元素left,top,bottom,right都為0，表明子類元素和父元素的距離為0，自然就和父元素自適應了。
關於切角，把角切掉是一種較為流行的設計風格，常用的方法是通過漸變來實現的。
linear-gradient語法如下
linear-gradient( [ | to ,]? [, ]+ )
指定角度，用於指定漸變的方向
描述漸變的起點位置
由乙個color值組成，並且跟隨乙個可選的終點位置。
最終該切角的**如下：
切角text.text
如果需要用四個切角的話，**如下所示：
切角text.text
《CSS揭秘》 平行四邊形
在視覺設計中，平行四邊形往往可以傳達出一種動感。使用css來建立平行四邊形。可以使用transform skewx 45deg 但是這樣會使裡面的內容也傾斜。有兩種解決方案可以解決這個問題 使用一層額外的html元素來包裹內容，對容器設定skewx，在內容上應用一次反向skewx變形 button ...
平行四邊形
請小夥伴們對自己ac的題目進行標記，注意每人只能標記一次！不知道的不要標記，惡意標記者將 賬號！時間限制 3 sec 記憶體限制 128 mb 提交 狀態 題目描述 求平面上n個點構成的平行四邊形個數。輸入 一行乙個數n。接下來n行，每行兩個數x,y，表示這個點的座標為 x,y 保證任意兩點不重合，...
平行四邊形邊數
在乙個平面內給定n個點，任意三個點不在同一條直線上，用這些點可以構成多少個平行四邊形？乙個點可以同時屬於多個平行四邊形。input 多組資料 10 處理到eof。每組資料第一行乙個整數n 4 n 500 接下來n行每行兩個整數xi,yi 0 xi,yi 1e9 表示每個點的座標。output 每組資...