シャープコーナーdivを実装するCSS

尖角在上面

效果图：

代码：

[html]

尖角div #top { width:400px; height:250px; border:3px solid; /* 边框宽度为3px */ position:relative; } .sp1,.sp2 { display:block; height:0px; width:0px; position:absolute; font-size:0; line-height:0; } .sp1 { top:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */ left:40px; /* 它来确定尖角的位置 */ border-top:0px; border-bottom:6px solid black; /* 注意颜色的变化 */ border-right:6px solid white; border-left:6px solid white; } .sp2 { top:6px; /* 是自身边框宽度的2倍 */ left:-3px; /* 是自身边框宽度的-1倍 */ border-top:0px; border-bottom:3px solid white; border-right:3px solid black; border-left:3px solid black; }

尖角在下面

效果图：

代码：

[html]

尖角div #bottom { width:400px; height:250px; border:3px solid; /* 边框宽度为3px */ position:relative; } .sp1,.sp2 { display:block; height:0px; width:0px; position:absolute; font-size:0; line-height:0; } .sp1 { bottom:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */ left:40px; /* 它来确定尖角的位置 */ border-bottom:0px; border-top:6px solid black; /* 注意颜色的变化 */ border-right:6px solid white; border-left:6px solid white; } .sp2 { bottom:6px; /* 是自身边框宽度的2倍 */ left:-3px; /* 是自身边框宽度的-1倍 */ border-bottom:0px; border-top:3px solid white; border-right:3px solid black; border-left:3px solid black; }

尖角在左边

效果图：

代码：

[html]

尖角div #left { width:400px; height:250px; border:3px solid; /* 边框宽度为3px */ position:relative; } .sp1,.sp2 { display:block; height:0px; width:0px; position:absolute; font-size:0; line-height:0; } .sp1 { left:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */ top:40px; /* 它来确定尖角的位置 */ border-left:0px; border-top:6px solid white; /* 注意颜色的变化 */ border-right:6px solid black; border-bottom:6px solid white; } .sp2 { left:6px; /* 是自身边框宽度的2倍 */ top:-3px; /* 是自身边框宽度的-1倍 */ border-left:0px; border-top:3px solid black; border-right:3px solid white; border-bottom:3px solid black; }

鋭角は右側です

レンダリング:

コード:

[html]

/title> width:400px; border:3px; 3px * / 位置:相対; .sp1,.sp2 高さ:0px; フォントサイズ:0; 0; } .sp1 { right:-9px; /* その絶対値とスパン境界の幅は div 境界の幅の 5 倍に等しい*/ top:40px; /* シャープの位置を決定します。コーナー*/ border-right:0px; border-top:6px ソリッドホワイト; /* 色の変化に注意してください*/ border-left:6px ソリッドブラック } .sp2 { right:6px; /* は独自のボーダーの 2 倍です*/ top:-3px; /* は独自のボーダーの幅の 1 倍です */ border-right:0px;上:3 ピクセル黒塗り ボーダー左:3 ピクセル白塗り

シャープコーナー div &lt ;style type="text/css"> #right { width:400px; height: 250px; border:3px Solid; /* 境界線の幅は 3px */ Position:relative; } .sp1 ,.sp2 { 表示:ブロック; 高さ:0px; 幅:0px; 位置:絶対; フォントサイズ:0; 行高さ:0; } .sp1 { 右:- 9px; /* その絶対値とスパン境界幅の合計は div 境界幅の 5 倍に等しい*/ top:40px; /* 鋭い角の位置を決定します*/ border-right:0px; border- top:6px ソリッドホワイト; /* 色の変化に注意してください*/ border-bottom:6px ソリッドホワイト; border -left:6px ソリッドブラック; } .sp2 { right:6px;独自のボーダーの幅の 1 倍 */ top:-3px; /* 独自のボーダーの幅の -1 倍 */ border -right:0px; border-top:3px plain black; border-bottom: 3px ソリッドブラック; border-left:3px ソリッドホワイト; }

シャープコーナーdivを実装するCSS

関連記事