CSS3基础用CSS制作平行四边形的导航菜单的方法

用CSS制作平行四边形的导航菜单的方法

使用CSS3的2D变换属性很容易将矩形变换为平行四边形,在网页设计中适当采用平行四边形的元素可以使网页更具有现代感,更有个性。有些网站的导航菜单就采用的平行四边形的按钮,例如下面这样一个网页导航:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试页面</title>
<style type="text/css">
ul {margin:30px;}
li {
 list-style-type:none;float:left;
 padding:10px 15px;margin:0 10px;
 background:#07c;
}
li a {
 color:#fff;text-decoration:none;
 display:inline-block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">手机软件</a></li>
<li><a href="#">杀毒软件</a></li>
<li><a href="#">系统工具</a></li>
<li><a href="#">视频软件</a></li>
<li><a href="#">设计软件</a></li>
</ul>
</body>
</html>

接下来使用CSS3的2D变换将导航列表项变换为平行四边形,即:

li {transform:skewX(30deg);}

这里我设置了倾斜30度,得到的效果如下图:

CSS平行四边形导航2.png

此时导航的列表项已经倾斜,但是内部的文字链接也产生了倾斜,所以还得给文字链接再往相反的方向做一次变换:

li a {transform:skewX(-30deg);}

这样的话,便实现了想要的效果,即背景倾斜而文字不倾斜:

CSS平行四边形导航3.png

除了使用两次2D变换的方法,还可以通过伪元素的方法来实现这种效果,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试页面</title>
<style type="text/css">
ul {margin:30px;}
li {
 list-style-type:none;
 padding:10px 15px;margin:0 10px;
 float:left;position:relative;
}
li a {color:#fff;text-decoration:none;display:inline-block;}
li:before {
 content:'';position:absolute;
 top:0;right:0;bottom:0;left:0;z-index:-1;
 background:#07c;transform:skew(30deg);
}
</style>
</head>
<body>
<ul>
<li><a href="#">手机软件</a></li>
<li><a href="#">杀毒软件</a></li>
<li><a href="#">系统工具</a></li>
<li><a href="#">视频软件</a></li>
<li><a href="#">设计软件</a></li>
</ul>
</body>
</html>

这里通过伪元素增加了一个“框”,通过设置定位,使这个框的大小跟导航列表项的尺寸相同,这是一个很实用的技巧,让伪元素灵活的继承父元素的尺寸,其实现要点是给父元素应用position:relative,然后给伪元素应用position:absolute,并把四个方向的偏移量都设置为0,这样伪元素所生成的“框”的水平和垂直方向都会继承父元素的尺寸。

接着设置这个框的背景和2D变换,再通过z-index属性将这个框显示在文字之下(如果不设置,则文字会被覆盖),便实现了背景倾斜文字不倾斜的效果了,从代码上看,似乎比第一种方法要复杂,但是第二种方法使用范围更广,假如一个元素的外层没有包裹的父元素,想要设置平行四边形效果的话,第一种方法就行不通了。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.sz-kmd.com.cn/css3/96.html