如何利用css3中的transform skewX实现平行四边形的导航菜单
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了如何利用css3中的transform skewX实现平行四边形的导航菜单,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2875字,纯文字阅读大概需要5分钟。
内容图文
![如何利用css3中的transform skewX实现平行四边形的导航菜单](/upload/InfoBanner/zyjiaocheng/417/442b7d3cc7fb48999f3333a9a32d76d4.jpg)
平行四边形其实是矩形的超集:它的各条边是两两平行的,但各个角则不一定都是直角。在视觉设计中,平行四边形往往可以传达出一种动感。
让我们试着用 CSS 创建一个按钮状的平行四边形链接。我们的起点就是一个普通的块状按钮,辅以一些简单的样式,然后,我们可以通过 skew() 的变形属性来对这个矩形进行斜向拉伸:
transform: skewX(-45deg);
但是,这导致它的内容也发生了斜向变形,这很不好看,而且难读。有没有办法只让容器的形状倾斜,而保持其内容不变呢?
很多人会想到嵌套元素方案,那么我们可以对内容再应用一次反向的 skew() 变形,从而抵消容器的变形效果,最终产生我们所期望的结果。不幸的是,这意味着我们将不得不使用一层额外的 HTML 元素来包裹内容,比如用一个 span:
<a href="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; /* 其他的文字颜色、内边距等样式…… */ } .button::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
此时,用伪元素生成的方块是重叠在内容之上的,一旦给它设置背景,就会遮住内容。为了修复这个问题,我们可以给伪元素设置z-index: -1 样式,这样它的堆叠层次就会被推到宿主元素之后。现在我们要做的最后一步,就是尽情地对它设置变形样式,并享受美好的结果。最终版的代码如下所示,它产生的视觉效果跟前文所述技巧是完全一致的:
.button { position: relative; /* 其他的文字颜色、内边距等样式…… */ } .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实现平行四边形的导航菜单的详细内容。
内容总结
以上是互联网集市为您收集整理的如何利用css3中的transform skewX实现平行四边形的导航菜单全部内容,希望文章能够帮你解决如何利用css3中的transform skewX实现平行四边形的导航菜单所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。