DIV+CSS スラッシュ効果_html/css_WEB-ITnose

DIV+CSS スラッシュ効果を適用するには、CSS Border の境界線を設定するだけです。コードは全員と共有されるため、自分で変更できます。

http://www.admin10000.com 2 つの点に注意するためのヒント: 1. DIV の幅と高さの定義。 2. IE6 では、DIV にはデフォルトで高さが設定されています。

上の図の右側は達成したい効果で、コードは次のとおりです:

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

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>

詳細については、Tencent Weibo を聞いてください: http:/ /t.qq.com/admin10000_com

詳細については、新浪微博をフォローしてください: http:// weibo.com/admin1w