CSS: 素晴らしい境界線 property_html/css_WEB-ITnose

翻訳: 素晴らしい CSS border プロパティ

翻訳者: dwqs

CSS では、border プロパティには多くのルールがあります。三角形やその他の画像など、一部のものについては、代わりに画像を使用します。しかし、それは今では必要ありません。CSS を使用していくつかの基本的な形状を形成できます。これについてはいくつかのヒントを共有しました。 ... 4. 直角三角形

.triangle_up{  height:0px; width:0px;  border-bottom:50px solid #006633;  border-left:50px solid transparent;  border-right:50px solid transparent;}

5. Cross street Effect

.triangle_down{  height:0px; width:0px;  border-top:50px solid #006633;  border-left:50px solid transparent;  border-right:50px solid transparent;}

1 ～ 5 のデモデモ (デモの都合上、ソースコードは変更されています): http:/ /jsfiddle.net/rt8cjtwq/embedded/result/

6. 方向矢印 (ハイライト効果、ソースコード変更)

CSS:

.triangle_left{  height:0px; width:0px;  border-left:50px solid #006633;  border-top:50px solid transparent;  border-bottom:50px solid transparent;  float:left;}

HTML:

.triangle_right{  height:0px; width:0px; float:left;  border-right:50px solid #006633;  border-top:50px solid transparent;  border-bottom:50px solid transparent;}

効果:

7おいしいロゴを作成します:

CSS:

.crossSquare{  height:0px; width:0px;  border-right:50px solid blue;  border-top:50px solid gray;  border-bottom:50px solid red;  border-left:50px solid yellow;}

HTML:

.triangle_left{  height:0px; width:0px;  border-left:50px solid #006633;  border-top:50px solid transparent;  border-bottom:50px solid transparent;  /*float:left;*/}.triangle_right{  height:0px; width:0px; /*float:left;*/  border-right:50px solid #006633;  border-top:50px solid transparent;  border-bottom:50px solid transparent;}

効果: (左上隅の境界線の色は白です)

お勧めの記事: CSS の再考: Border 属性

次の記事: 8 つの非常に便利な PHP セキュリティ関数、あなたはいくつ知っていますか?