实现棱形的CSS样式

chaoyi

浏览: 310442 次
性别:
来自: 广州

最近访客更多访客>>

hjz

loginboot

szluckboy

1357冬天哈

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2015-01 ( 21)
2014-12 ( 32)
2014-11 ( 42)
更多存档...

博客分类：

Html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
body{
	margin:0px;
	padding:0px;
}

#MaxBox{
	margin:0px auto;
	padding:0px;
	width:950px;
	height:500px;
	background:#FFF;
}

.navX{
	-moz-transform: rotate(0deg) scale(1, 1) skewX(-30deg) skewY(0deg) translate(14px, 0px);/* FF3.5+ */
-webkit-transform: rotate(0deg) scale(1, 1) skew(-30deg, 0deg) translate(14px, 0px);/*Saf3.1+, Chrome*/
-o-transform: rotate(0deg) scale(1, 1) skew(-30deg, 0deg) translate(14px, 0px);/* Opera 10.5 */
-ms-transform: rotate(0deg) scale(1, 1) skew(-30deg, 0deg) translate(14px, 0px);/* IE 9 */
transform: rotate(0deg) scale(1, 1) skew(-30deg, 0deg) translate(14px, 0px);
}
.navXR{
	-moz-transform: rotate(0deg) scale(1, 1) skewX(30deg) skewY(0deg) translate(-14px, 0px );/* FF3.5+ */
-webkit-transform: rotate(0deg) scale(1, 1) skew(30deg, 0deg) translate(-14px, 0px);/*Saf3.1+, Chrome*/
-o-transform: rotate(0deg) scale(1, 1) skew(30deg, 0deg) translate(-14px, 0px);/* Opera 10.5 */
-ms-transform: rotate(0deg) scale(1, 1) skew(30deg, 0deg) translate(-14px, 0px);/* IE 9 */
transform: rotate(0deg) scale(1, 1) skew(30deg, 0deg) translate(-14px, 0px);
}

.navXR{
	background:#990; text-align:center; color:#FFF; line-height:50px; text-decoration:none;
}

</style>

<body>

<div class="navX" style="background:#930; border-right:solid 5px #FFFFFF; height:50px;width:100px; overflow:hidden; float:left;">
  <a href="###/1.html"><div class="navXR" style="height:50px;width:128px;">主页</div></a>
</div>
<div class="navX" style="background:#930; border-right:solid 5px #FFFFFF; height:50px;width:100px; overflow:hidden; float:left;">
  <a href="###/11.html"><div class="navXR" style="height:50px;width:128px;">软件产品</div></a>
</div>
<div class="navX" style="background:#930; border-right:solid 5px #FFFFFF; height:50px;width:100px; overflow:hidden; float:left;"> 
  <a href="###/111.html"><div class="navXR" style="height:50px;width:128px;">解决方案</div></a>
</div>
<div class="navX" style="background:#930; border-right:solid 5px #FFFFFF; height:50px;width:100px; overflow:hidden; float:left;">
  <a href="###/1111.html"><div class="navXR" style="height:50px;width:128px;">网上招聘</div></a>
</div>
<div class="navX" style="background:#930; height:50px;width:100px; overflow:hidden; float:left;">
  <a href="###/11111.html"><div class="navXR" style="height:50px;width:128px;">联系我们</div></a>
</div>

</body>
</html>

效果图：