逛网站的时候，会遇到一些比较炫酷的效果，比如一些导航栏用平行四边形的格式排版，一看到平行四边形，一般都会想到用图片做背景来实现，虽然图片方式可以实现，但是有时要改变某些效果时候不是很方便，比如想改变第二个导航的背景颜色，那样你就只能又要切多一张图片。所以今天主要来讲解用另一种方法即纯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） 对打开的链接网页内容进行查看，确定是否是互译页面；

作者简介：一个专注于记录互联网兼职 任务的学生，公众号《做点事吧》，欢迎关注。