实现棱形的CSS样式

最新推荐文章于 2023-03-23 23:09:11 发布

chaoyv

最新推荐文章于 2023-03-23 23:09:11 发布

阅读量742

点赞数 1

分类专栏： Html

本文链接：https://blog.csdn.net/chaoyv/article/details/84683614

版权

Html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<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>

效果图：

chaoyv

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现棱形的CSS样式

&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;无标题文档&lt;/title&gt;&lt;/head&gt;&lt;style type="text/cs
复制链接

扫一扫

专栏目录