css to implement sharp corner div

尖角在上面

效果图：

代码：

[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; }

The sharp corner is on the right

Rendering:

Code:

[html]

Sharp corner div #right { width:400px; height:250px; border:3px solid; /* Border width is 3px * / position:relative; } .sp1,.sp2 { display:block; height:0px; width:0px; position:absolute; font-size:0; line-height:0; } .sp1 { right:-9px; /* Its absolute value plus the span border width is equal to 5 times the div border width*/ top:40px; /* It determines the position of the sharp corners*/ border-right:0px; border-top:6px solid white; /* Note the color change*/ border-bottom:6px solid white; border-left:6px solid black; } .sp2 { right:6px; /* is 2 times the width of its own border*/ top:-3px; /* is -1 times the width of its own border */ border-right:0px; border-top:3px solid black; border-bottom:3px solid black; border-left:3px solid white; }

&gt ;

Sharp corner div #right { width:400px; height: 250px; border:3px solid; /* border width is 3px */ position:relative; } .sp1,.sp2 { display:block; height:0px; width:0px; position:absolute ; font-size:0; line-height:0; } .sp1 { right:-9px; /* Its absolute value plus the span border width is equal to 5 times the div border width*/ top:40px; /* It determines the position of the sharp corners*/ border-right:0px; border-top:6px solid white; /* Pay attention to the color change*/ border-bottom:6px solid white; border -left:6px solid black; } .sp2 { right:6px; /* is 2 times the width of its own border*/ top:-3px; /* is -1 times the width of its own border */ border -right:0px; border-top:3px solid black; border-bottom:3px solid black; border-left:3px solid white; }

&lt ;body>

css to implement sharp corner div

Related articles