Heim  >  Artikel  >  Web-Frontend  >  DIV+CSS制作斜线效果记录_html/css_WEB-ITnose

DIV+CSS制作斜线效果记录_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:31:171094Durchsuche

DIV+CSS 斜线效果很简单,只需设置一下CSS Border 的边框就能有斜线效果。代码分享给大家,你可以自己变通。

  提示要注意两点: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 ;

}

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn