div+css制作斜线实例代码

发布时间:2020-03-16编辑:脚本学堂
本文介绍了div+css制作斜线的方法,div+css 斜线效果很简单,只需设置css border 的边框就能有斜线效果,有需要的朋友参考学习下。

div+css 斜线效果很简单,设置一下css border 的边框就能有斜线效果。
注意两点:
1、div宽高的定义。
2、div在 ie6 中默认是有高度的。

图示:
div+css制作斜线

上图右边是要实现的效果。

代码:
 

复制代码 代码示例:
<div id="box"></div></p> <p><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;
}
</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>