怎么用css3中的transform skewX实现平行四边形的导航菜单

本篇内容介绍了“怎么用css3中的transform skewX实现平行四边形的导航菜单”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

　　平行四边形其实是矩形的超集：它的各条边是两两平行的，但各个角则不一定都是直角。在视觉设计中，平行四边形往往可以传达出一种动感。

　　让我们试着用CSS创建一个按钮状的平行四边形链接。我们的起点就是一个普通的块状按钮，辅以一些简单的样式，然后，我们可以通过skew()的变形属性来对这个矩形进行斜向拉伸：

　　transform:skewX(-45deg);

　　但是，这导致它的内容也发生了斜向变形，这很不好看，而且难读。有没有办法只让容器的形状倾斜，而保持其内容不变呢？

　　很多人会想到嵌套元素方案，那么我们可以对内容再应用一次反向的skew()变形，从而抵消容器的变形效果，最终产生我们所期望的结果。不幸的是，这意味着我们将不得不使用一层额外的HTML元素来包裹内容，比如用一个span：

　　<ahref="www.php.cn"class="button">

　　<span>www.php.cn</span>

　　</a>

　　.button{transform:skewX(-45deg);}

　　.button>span{transform:skewX(45deg);}

　　我们可以看到，这个方法的表现很不错，但它也意味着我们不得不添加额外的HTML元素。如果结构层的变更是不允许的，或者你希望严格保持结构层的纯净度，别担心，我们还有一个纯CSS的解决方案。

　　伪元素方案

　　另一种思路是把所有样式（背景、边框等）应用到伪元素上，然后再对伪元素进行变形。因为我们的内容并不是包含在伪元素里的，所以内容并不会受到变形的影响。下面来看看这个技巧能否得到与前面相同的链接样式。

　　我们希望伪元素保持良好的灵活性，可以自动继承其宿主元素的尺寸，甚至当宿主元素的尺寸是由其内容来决定时仍然如此。一个简单的办法是给宿主元素应用position:relative样式，并为伪元素设置position:absolute，然后再把所有偏移量设置为零，以便让它在水平和垂直方向上都被拉伸至宿主元素的尺寸。代码看起来是这样的：

　　.button{

　　position:relative;

　　/*其他的文字颜色、内边距等样式&hellip;&hellip;*/

　　}

　　.button::before{

　　content:'';

　　position:absolute;

　　top:0;right:0;bottom:0;left:0;

　　}

　　此时，用伪元素生成的方块是重叠在内容之上的，一旦给它设置背景，就会遮住内容。为了修复这个问题，我们可以给伪元素设置z-index:-1样式，这样它的堆叠层次就会被推到宿主元素之后。现在我们要做的最后一步，就是尽情地对它设置变形样式，并享受美好的结果。最终版的代码如下所示，它产生的视觉效果跟前文所述技巧是完全一致的：

　　.button{

　　position:relative;

　　/*其他的文字颜色、内边距等样式&hellip;&hellip;*/

　　}

　　.button::before{

　　content:'';/*用伪元素来生成一个矩形*/

　　position:absolute;

　　top:0;right:0;bottom:0;left:0;

　　z-index:-1;

　　background:#58a;

　　transform:skew(45deg);

　　}

　　这个技巧不仅对skew()变形来说很有用，还适用于其他任何变形样式，当我们想变形一个元素而不想变形它的内容时就可以用到它。举个例子，我们把这个技巧针对rotate()变形样式稍稍调整一下，再用到一个正方形元素上，就可以很容易地得到一个菱形。

　　这个技巧的关键在于，我们利用伪元素以及定位属性产生了一个方块，然后对伪元素设置样式，并将其放置在其宿主元素的下层。这种思路同样可以运用在其他场景中，从而得到各种各样的效果。

“怎么用css3中的transform skewX实现平行四边形的导航菜单”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！