逛網站的時候，會遇到一些比較炫酷的效果，比如一些導航欄用平行四邊形的格式排版，一看到平行四邊形，一般都會想到用圖片做背景來實現，雖然圖片方式可以實現，但是有時要改變某些效果時候不是很方便，比如想改變第二個導航的背景顏色，那樣你就只能又要切多一張圖片。所以今天主要來講解用另一種方法即純CSS樣式來實現平行四邊形。

效果圖如下：

構建的html:

CSS樣式：

首先用到了CSS的偽類元素添加一個長方形，然后通過transform:skew的屬性來做扭曲變化45°，就可以達到了平行四邊形的效果！當然，你可以隨時調整skew()屬性內的角度來變化自己的平行四邊形方向！

一小節給大家分享了各種橢圓的實現方法，此時我們來說一下平行四邊形的實現方法。

平行四邊形

基本變形屬性transform有很多，接下來我們用到哪一個說哪一個。

我們一般用skew屬性來對矩形進行斜向拉伸，變成平行四邊形，但是如果直接對元素使用的話，它里面的內容也會跟著斜向變動。

• 嵌套元素方案

對容器內容再應用一次反向的skewX()變形，從而抵消容器的變形效果

來看一下html和css具體代碼

• 偽元素方法

上面方法需要添加額外的HTML元素。這里提供一個不用添加額外的HTML元素的。

這種方法的思路是把所有的樣式(背景、邊框等)應用到偽元素上，然后對偽元素進行變形。

要注意幾點：

• 一是要給宿主元素設置position: relative，并給偽類元素設置position: absolute，且偏移量都為0，以便讓它在水平和垂直方向上都被拉伸至宿主元素的尺寸。

• 二是偽元素生成的方塊是重疊在內容之上的，一旦設置背景，就會遮住內容，應該設置z-index: -1或者更小的數，宿主沒有設置z-index默認為0；

• 想學習更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干貨。

就這樣一個平行四邊形效果就實現了，后還會補充更多多邊形效果，大家多多支持，多多鼓勵！

于平行網頁尋源，前面我們對其做了一些最基本的介紹，包括什么是平行網頁、怎么去尋找平行網頁。

我們知道，平行網頁找到了，任務已經完成一半了，剩下的任務你只需要把分站間的內容互譯頁面找出來提交即可，看似簡單，其實這一步難度還是比較大的，平臺要求3對互譯頁面，并且只要有一對不滿足互譯頁面的要求，平臺也不會采納，我們前期做的工作都將功虧一簣。

也許你會說可以使用語言翻譯工具，看下頁面是否是互譯的，在我看來，這也有些不太現實，做過平行網頁尋源任務的同學知道，平行網頁要求的語言有很多，比如西班牙語、俄語、越南語、葡萄牙語、法語、土耳其等語言，這么多語言如何去翻譯，并且任務的數量是一定的，每個任務也有一定時間的限制，很顯然，使用翻譯工具不是一個好辦法。那我們是否有其他辦法呢？

今天，我們就聊這個話題。找到平行網頁后，如何快速找到分站間的內容互譯頁面？

其實，瀏覽器在打開網頁后，我們是有辦法查看到此網頁的源代碼的，例如：Apple 的主站https://www.apple.com/, 使用 Google Chrome 瀏覽器打開，在頁面上點擊右鍵，會彈出一個對話框，可以看到“查看網頁源代碼”一項。

點擊會重新彈出一個頁面，這個頁面就是 https://www.apple.com/ 主站的源代碼了。

仔細看下這個網頁的源代碼，不難發現，這些信息非常有助于我們去確定網頁的內容是否是互譯的。現在，以 Apple 的中國主站與西班牙主站為例，來介紹如何通過網頁源碼來初步定位頁面內容是否是互譯的。

Apple 中國分站的源碼片段：

Apple 西班牙分站的源碼片段：

對比這兩個分站，紅色方框的內容，我們會注意到有一個關鍵字 href, HTML 語法中較常見，其屬性值可以是任何有效文檔的相對或絕對的 URL，換句話說href 后面的值指向的是另一個站點，分別點擊 href 后面的值 ”cn/mac”, ” es/mac”, 我們會看到重新彈出兩個網頁。

大致看下頁面，盡管我們不懂西班牙語，但是從圖片以及顯示的內容看，這就是一對標準的互譯頁面。

同時，從 href 后面的值”cn/mac”, ” es/mac”, 也能夠發現，cn, es 后面緊跟的 “mac”, 這個鏈接下面的內容大概率是跟 mac 內容強相關， 也能夠初步判斷這兩個鏈接下面的內容是互譯的。

所以，從上面的描述看， 快速找到分站間的內容互譯頁面可以簡單概括為如下幾個步驟：

（1） 確定網頁主站對應的分站；

（2） 使用 Google Chrome 瀏覽器打開分站，查看分站的源代碼；

（3） 搜索關鍵字 href, 找到其后面的屬性值，并點擊打開其對應的鏈接；

（4） 對打開的鏈接網頁內容進行查看，確定是否是互譯頁面；

作者簡介：一個專注于記錄互聯網兼職 任務的學生，公眾號《做點事吧》，歡迎關注。