如何實現下圖所示的平行四邊形布局效果？
一提到平行四邊形，條件反射般的就會想起csstransform中的skew()/skewx()/skewy()方法，可以讓元素斜切，從而實現平行四邊形效果
然而，一開始的布局不僅後面的白色背景形成平行四邊形，整段文字內容也按照平行四邊形的格式進行了排版，如果文字內容也應用skewx，所有文字內容就會表現為傾斜，如下所示：
transform: skewx(-10deg);border:1px solid #ccc;border-radius:4px;">我是一段文字內容，我應用了transform屬性中的skewx，看看我現在的表現是怎樣子的……
我們的預期應該是文字都是正立顯示，而不是這樣子的傾斜。我們可能第一反應是對裡面的文字進行反向的
skewx，但那需要對每一行文字單獨處理，或者對每乙個字元單獨進行處理，成本有些高，不太實際。這就是
skewx方法的侷限，那有沒有什麼其他方法可以實現平行四邊形的布局效果呢？有，可以借助css shapes布局實現。然而你就算熟悉了css shapes布局的每乙個css屬性，這裡的平行四邊形布局效果你還不一定會實現得出來，因為需要借助一點逆向思維。
css shapes實現平行四邊形布局的關鍵不在於平行四邊形本身，而在於左上角和右下角的兩個三角形。
html結構如下：
內容內容內容內容內容內容內容內容內容內容內css**如下：內容內容內容內容內容內容內容內容內容內容內
內容內容內容內容內容內容內容內容內容內容內
內容內容內容內容內容內容內容內容內容內容內
.shape-left實現**很簡單，關鍵是思路。.shape-right
.content
.content::after
效果：
不規則形狀的廣告更能引起使用者的注意力，從而提高廣告點選率。
於是對於平行四邊形布局，左上角和右下角的三角空缺正好可以用來放兩個三角形廣告，既充分利用空間，又有高收益。
前端開發通常與公司的業務收入直接關聯不大，但是這裡卻不一樣，如果你實現的新穎的布局效果能夠大幅提高公司的收入，證明了你在這一塊的價值，相信對你的績效會很不錯，可以在專案中試一試。
然而實際開發的時候，展示的文字內容有多有少，走平行四邊形並不合適，因為會導致三角很小，或者右下角的三角位置無法確定的問題，因此，推薦實現的布局形狀是下圖這樣子的。
平行四邊形
請小夥伴們對自己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 每組資...
