CSS3 は、triangle_html/css_WEB-ITnose を実装します。-htmlチュートリアル-php.cn

CSS3 は、triangle_html/css_WEB-ITnose を実装します。

WBOY

リリース： 2016-06-24 11:27:59

オリジナル

999 人が閲覧しました

私たちは三角形の効果をよく使います:

この効果を実現するために CSS3 を使うことができますが、どうやって実現するのでしょうか?まず原理を説明します。空の div を定義し、この div の幅と高さを 0 に設定し、この div に 100 ピクセルの境界線を追加します (ここでは簡単に観察できるようにしています)。正方形が実際にはこの div の境界であることがわかります。

<div id="d1"></div>style：    #d1{        width:0;         height:0;         border:100px solid red;    }

ログイン後にコピー

達成された効果:

それでは、この要素に対応する各境界線は現在どのように見えるでしょうか?見てみましょう:

対応するコード:

<div id="d1"></div>style：    #d1{        width:0;         height:0;        border-width:50px;        border-style:solid;        border-color:red  blue  black  yellow;<br />　　　　　　　　　　　　 上　　右　　　下　　　左

ログイン後にコピー

上記から、実際には、幅と高さが 0 のこの div の各境界線は、実際の操作では三角形であることがわかります。三角形が 1 つ必要なので、不要な境界線を (透明属性を使用して) 非表示にするだけです:

たとえば、下向きの三角形が必要な場合:

対応するコード:

<div id="d1"></div>style：    #d1{        width:0;         height:0;        border-width:50px;        border-style:solid;        border-color:red transparent transparent transparent;<br />　　　　　　　　　　　　　上　　　右　　　　　　下　　　　　　左    }

ログイン後にコピー

これからわかります。対応する境界線を非表示にするだけで済みます。対応する境界線の色の順序は次のとおりです。

border-color: 右上、左下、各色はスペースで区切られます。

45度の三角形:

対応するコード:

<div id="d1"></div>style：    #d1{        width:0;         height:0;        border-width:50px;        border-style:solid;        border-color:transparent transparent red red ;<br />　　　　 border-color:transparent transparent red blue ;

ログイン後にコピー

同時に、対応する境界線の幅を調整して三角形の形状を調整できます:

対応するコード:

幅の下の境界線を変更しました

<div id="d1"></div>style：    #d1{        width:0;         height:0;        border-width:50px;        border-bottom-width:150px;        border-style:solid;        border-color:transparent transparent red transparent;        border-color:blue green red black;    }

ログイン後にコピー

同時に、丸い三角形を描くこともできます:

対応するコード:

より快適に見えるように、ここに透明度属性を追加します。

すごいです

これは基本的に三角形の作成に関するものですが、多くの場合、その前後で疑似クラスを使用すると予期せぬ効果が生じます:

たとえば、ログインウィンドウのこのラベルは私が自分で書きました: