DIV+CSS制作斜线效果记录_html/css_WEB-ITnose
提示要注意两点:1、DIV宽高的定义。2、DIV在 IE6 中默认是有高度的。
上图右边是我们要实现的效果,代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
#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 ;
}
在FF IE7 IE8 都显示正常,但在IE6中,却如上图左边所示,中间有差距,因此,需要加一行:
line-height:0px;
最终代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#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 ;
}
推荐阅读
-
学习使用 CSS3 制作网站面包屑导航效果_html/css_WEB-ITnose
-
看书《DIV+CSS商业案例与网页布局开发精讲》_盒子模型、制作logo和banner_随手笔记_html/css_WEB-ITnose
-
用simple choker制作融合效果的菜单_html/css_WEB-ITnose
-
网页制作重点记录_html/css_WEB-ITnose
-
网站上那种带特殊效果的热门标签怎么制作_html/css_WEB-ITnose
-
三种简洁的经典高效的DIV+CSS制作的Tab导航简析_html/css_WEB-ITnose
-
DIV+CSS定义滚动条样式,实现内嵌效果_html/css_WEB-ITnose
-
详解用CSS3制作圆形滚动进度条动画效果_html/css_WEB-ITnose
-
网页制作重点记录_html/css_WEB-ITnose
-
详解用CSS3制作圆形滚动进度条动画效果_html/css_WEB-ITnose