CSS border_html/css_WEB-ITnose の賢い使い方-htmlチュートリアル-php.cn

CSS border_html/css_WEB-ITnose の賢い使い方

WBOY

リリース： 2016-06-24 12:02:29

オリジナル

1063 人が閲覧しました

上下左右の境界線の交差点は滑らかな対角線を表します。この機能を使うと、上下左右の枠線の幅や色を変えることで、小さな三角形や台形などを作ることができます。

幅を調整して三角形の形状を調整します。

三角形の実装

例 1:

#test1{    height:20px;    width:20px;    border-color:#FF9600 #3366ff #12ad2a #f0ed7a;    border-style:solid;    border-width:20px;}

ログイン後にコピー

例 2:

上記を踏まえると、高さと幅を 0 に設定すると、境界線のスラッシュが表示されます。

#test2 {    height:0;    width:0;    overflow: hidden; /* 这里设置overflow, font-size, line-height */    font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;    border-style:solid;    border-width:20px;}

ログイン後にコピー

例 3:

例 2 では、4 つの色のうち 1 つの色だけを保持する場合、残りの 3 色を透明または同じ色に設定します。背景色を指定すると、三角形が形成されます。

#test3 {    height:0;    width:0;    overflow: hidden;    font-size: 0;    line-height: 0;    border-color:#FF9600 transparent transparent transparent;    border-style:solid;    border-width:20px;}

ログイン後にコピー

例 4:

例 3 では、IE6 で、透明効果を実現するために残りの 3 辺の境界線スタイルを破線に設定する必要があります。

#test4 {    height:0;    width:0;    overflow: hidden;    font-size: 0;    line-height: 0;    border-color:#FF9600 transparent transparent transparent;    border-style:solid dashed dashed dashed;    border-width:20px;}

ログイン後にコピー

例 5:

上に描かれた小さな三角形の斜辺は、すべて元のボックスの辺に依存します。ボックスの対角線上に斜辺を持つ別の小さな三角形の形もあります。

#test5 {    height:0;    width:0;    overflow: hidden;    font-size: 0;    line-height: 0;    border-color:#FF9600 #3366ff transparent transparent;    border-style:solid solid dashed dashed;    border-width:40px 40px 0 0 ;}

ログイン後にコピー

いずれかの色を維持すると、対角線上に斜辺を持つ三角形が得られます。

角丸効果を実現

実際には非常に小さな台形で表示される、ほぼ丸い角を実現できます。 ❤️