DIV CSS slash effect_html/css_WEB-ITnose

DIV CSS slash effect is very simple, just set the border of CSS Border to have a slash effect. The code is shared with everyone so you can adapt it yourself.

http://www.admin10000.com Tips to pay attention to two points: 1. The definition of DIV width and height. 2. DIV has a height by default in IE6.

The right side of the above picture is the effect we want to achieve, the code is as follows:

<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;}</style>

It displays normally in FF IE7 IE8, but in IE6, it is as shown above As shown on the left, there is a gap in the middle, so you need to add a line:

line-height:0px;

The final code is as follows:

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

Please listen to Tencent for more Weibo: http://t.qq.com/admin10000_com

For more information, please follow Sina Weibo: http://weibo.com/admin1w