div和css制作斜线示例分享

DIV+CSS 斜线效果很 简单 ，只需设置一下CSS Border 的边框就能有斜线效果。代码分享给大家，你可以自己变通。
提示要注意两点：1、DIV 宽 高的定义。2、DIV在 IE6 中默认是有高度的。

上图 右边 是我们要实现的效果，代码如下：

复制代码

代码如下:

<div id="box"></div></p> <p><style ty PE ="text/css">
# box{
width:0px; h ei ght:0px;
border:40px solid #000;
border -t op-color:#930;
border-bottom-color:#0C3;
border-left-color:# fc 0;
border-right-color:#009;
}
</style>

在FF IE7 IE8 都显示 正常 ，但在IE6中，却如上图左边所示，中间有差距，因此，需要加一行：

line-height:0px;

最终代码如下：

复制代码

代码如下:

<div id="box"></div>

<style type="text/css">
#box{
width:0px; height:0px;
border:40px solid #000;
border-top-color:#930;
border-bottom-color:#0C3;
border-left-color:#FC0;
border-right-color:#009;
line-height:0px;
}
</style>
</head>

@H_ 777 _66@

总结

以上是 为你收集整理的 div和css制作斜线示例分享 全部内容，希望文章能够帮你解决 div和css制作斜线示例分享 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于div和css制作斜线示例分享的详细内容...