<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>
效果图: