ホームページ >ウェブフロントエンド >htmlチュートリアル >DIV+CSS 制作スラッシュエフェクト Record_html/css_WEB-ITnose

DIV+CSS 制作スラッシュエフェクト Record_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:31:171113ブラウズ

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

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

上の図の右側が実現したいエフェクトです。 コードは次のとおりです。

1

2

3

4

5

6

7

8

9

10

11

12

FF IE7 と IE8 では左のように表示されます。上の画像では、真ん中に隙間があるので、1行追加する必要があります:

line-height:0px; 最終的なコードは次のとおりです:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。