*以下技巧均源自於lea verou所著《css secrets》
平行四邊形的構造可以基於矩形通過skew()的變形屬性進行斜向拉公升得到（skew所用的座標系，縱向是x軸，橫向是y軸，與常見的座標系相反）。
但是內容傾斜可能不是我們所需要的效果，一種常規的解決方案就是在內層巢狀乙個div，然後加上乙個反方向的拉公升transform:skewx(45deg);但是有**潔癖的人表示接受不能。
另一種思路是將所有樣式應用到偽元素上。然後再對偽元素進行變形。
這樣不但解決了內容傾斜的問題，而且html結構還是和之前一樣乾淨。不過要注意偽元素生成的圖案是重疊在內容之上的，一旦給它設定背景，就會遮住內容，所以要加上z-index: -1。
如果是在正方形的基礎之上，菱形就是正方形圖案旋轉45度的圖形。我們很容易想到將外層div旋轉45度再將內層img反向旋轉45度。得到如下的圖案。
是個挺漂亮的正八邊形呢，如果你能說服產品經理，那工作也算完成啦。好吧，我猜你不能說服。。。
這裡由於旋轉方向不一致，外層div擷取了超出的部分（注意overflow:hidden），然後一部分又空出來了。只要填充完空出的部分就是菱形啦，這裡你可以畫個草圖用勾股定理算一算。
算出的結果是放大1.42倍填充完全。我們在img的transform屬性改為transform:rotate(45deg) scale(
1.42)
;得到下圖：
這個構造菱形的方案有乙個缺陷，就是當原圖不是正方形就需要使用更大的放大係數，擷取的內容就更有限了。
而且方案本身也不算簡潔優雅。這裡向大家介紹乙個屬性clip-path（遺憾的是支援性似乎並不好），它可以通過傳入固定的位置點將裁剪成任意的多邊形。
希望在不遠的將來clip-path這個屬性在各遊覽器得到更好的支援。
平行四邊形
請小夥伴們對自己ac的題目進行標記，注意每人只能標記一次！不知道的不要標記，惡意標記者將 賬號！時間限制 3 sec 記憶體限制 128 mb 提交 狀態 題目描述 求平面上n個點構成的平行四邊形個數。輸入 一行乙個數n。接下來n行，每行兩個數x,y，表示這個點的座標為 x,y 保證任意兩點不重合，...
《CSS揭秘》 平行四邊形
在視覺設計中，平行四邊形往往可以傳達出一種動感。使用css來建立平行四邊形。可以使用transform skewx 45deg 但是這樣會使裡面的內容也傾斜。有兩種解決方案可以解決這個問題 使用一層額外的html元素來包裹內容，對容器設定skewx，在內容上應用一次反向skewx變形 button ...
平行四邊形邊數
在乙個平面內給定n個點，任意三個點不在同一條直線上，用這些點可以構成多少個平行四邊形？乙個點可以同時屬於多個平行四邊形。input 多組資料 10 處理到eof。每組資料第一行乙個整數n 4 n 500 接下來n行每行兩個整數xi,yi 0 xi,yi 1e9 表示每個點的座標。output 每組資...