尖角在上面 效果图: 代码: [html] 尖角div <br>#top <br>{ <br> width:400px; <br> height:250px; <br> border:3px solid; /* 边框宽度为3px */ <br> position:relative; <br>} <br>.sp1,.sp2 <br>{ <br> display:block; <br> height:0px; <br> width:0px; <br> position:absolute; <br> font-size:0; <br> line-height:0; <br>} <br>.sp1 <br>{ <br> top:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */ <br> left:40px; /* 它来确定尖角的位置 */ <br> border-top:0px; <br> border-bottom:6px solid black; /* 注意颜色的变化 */ <br> border-right:6px solid white; <br> border-left:6px solid white; <br>} <br>.sp2 <br>{ <br> top:6px; /* 是自身边框宽度的2倍 */ <br> left:-3px; /* 是自身边框宽度的-1倍 */ <br> border-top:0px; <br> border-bottom:3px solid white; <br> border-right:3px solid black; <br> border-left:3px solid black; <br>} <br> <br> 尖角div<br>#top<br>{<br> width:400px;<br> height:250px;<br> border:3px solid; /* 边框宽度为3px */<br> position:relative;<br>}<br>.sp1,.sp2<br>{<br> display:block;<br> height:0px;<br> width:0px;<br> position:absolute;<br> font-size:0;<br> line-height:0;<br>}<br>.sp1<br>{<br> top:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */<br> left:40px; /* 它来确定尖角的位置 */<br> border-top:0px;<br> border-bottom:6px solid black; /* 注意颜色的变化 */<br> border-right:6px solid white;<br> border-left:6px solid white;<br>}<br>.sp2<br>{<br> top:6px; /* 是自身边框宽度的2倍 */<br> left:-3px; /* 是自身边框宽度的-1倍 */<br> border-top:0px;<br> border-bottom:3px solid white;<br> border-right:3px solid black;<br> border-left:3px solid black;<br>}</p> <p> 尖角在下面 效果图: 代码: [html] 尖角div <br>#bottom <br>{ <br> width:400px; <br> height:250px; <br> border:3px solid; /* 边框宽度为3px */ <br> position:relative; <br>} <br>.sp1,.sp2 <br>{ <br> display:block; <br> height:0px; <br> width:0px; <br> position:absolute; <br> font-size:0; <br> line-height:0; <br>} <br>.sp1 <br>{ <br> bottom:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */ <br> left:40px; /* 它来确定尖角的位置 */ <br> border-bottom:0px; <br> border-top:6px solid black; /* 注意颜色的变化 */ <br> border-right:6px solid white; <br> border-left:6px solid white; <br>} <br>.sp2 <br>{ <br> bottom:6px; /* 是自身边框宽度的2倍 */ <br> left:-3px; /* 是自身边框宽度的-1倍 */ <br> border-bottom:0px; <br> border-top:3px solid white; <br> border-right:3px solid black; <br> border-left:3px solid black; <br>} <br> <br> 尖角div<br>#bottom<br>{<br> width:400px;<br> height:250px;<br> border:3px solid; /* 边框宽度为3px */<br> position:relative;<br>}<br>.sp1,.sp2<br>{<br> display:block;<br> height:0px;<br> width:0px;<br> position:absolute;<br> font-size:0;<br> line-height:0;<br>}<br>.sp1<br>{<br> bottom:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */<br> left:40px; /* 它来确定尖角的位置 */<br> border-bottom:0px;<br> border-top:6px solid black; /* 注意颜色的变化 */<br> border-right:6px solid white;<br> border-left:6px solid white;<br>}<br>.sp2<br>{<br> bottom:6px; /* 是自身边框宽度的2倍 */<br> left:-3px; /* 是自身边框宽度的-1倍 */<br> border-bottom:0px;<br> border-top:3px solid white;<br> border-right:3px solid black;<br> border-left:3px solid black;<br>}</p> <p> 尖角在左边 效果图: 代码: [html] 尖角div <br>#left <br>{ <br> width:400px; <br> height:250px; <br> border:3px solid; /* 边框宽度为3px */ <br> position:relative; <br>} <br>.sp1,.sp2 <br>{ <br> display:block; <br> height:0px; <br> width:0px; <br> position:absolute; <br> font-size:0; <br> line-height:0; <br>} <br>.sp1 <br>{ <br> left:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */ <br> top:40px; /* 它来确定尖角的位置 */ <br> border-left:0px; <br> border-top:6px solid white; /* 注意颜色的变化 */ <br> border-right:6px solid black; <br> border-bottom:6px solid white; <br>} <br>.sp2 <br>{ <br> left:6px; /* 是自身边框宽度的2倍 */ <br> top:-3px; /* 是自身边框宽度的-1倍 */ <br> border-left:0px; <br> border-top:3px solid black; <br> border-right:3px solid white; <br> border-bottom:3px solid black; <br>} <br> <br> 尖角div<br>#left<br>{<br> width:400px;<br> height:250px;<br> border:3px solid; /* 边框宽度为3px */<br> position:relative;<br>}<br>.sp1,.sp2<br>{<br> display:block;<br> height:0px;<br> width:0px;<br> position:absolute;<br> font-size:0;<br> line-height:0;<br>}<br>.sp1<br>{<br> left:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */<br> top:40px; /* 它来确定尖角的位置 */<br> border-left:0px;<br> border-top:6px solid white; /* 注意颜色的变化 */<br> border-right:6px solid black;<br> border-bottom:6px solid white;<br>}<br>.sp2<br>{<br> left:6px; /* 是自身边框宽度的2倍 */<br> top:-3px; /* 是自身边框宽度的-1倍 */<br> border-left:0px;<br> border-top:3px solid black;<br> border-right:3px solid white;<br> border-bottom:3px solid black;<br>}</p> <p> 尖角在右边 效果图: 代码: [html] 尖角div <br>#right <br>{ <br> width:400px; <br> height:250px; <br> border:3px solid; /* 边框宽度为3px */ <br> position:relative; <br>} <br>.sp1,.sp2 <br>{ <br> display:block; <br> height:0px; <br> width:0px; <br> position:absolute; <br> font-size:0; <br> line-height:0; <br>} <br>.sp1 <br>{ <br> right:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */ <br> top:40px; /* 它来确定尖角的位置 */ <br> border-right:0px; <br> border-top:6px solid white; /* 注意颜色的变化 */ <br> border-bottom:6px solid white; <br> border-left:6px solid black; <br>} <br>.sp2 <br>{ <br> right:6px; /* 是自身边框宽度的2倍 */ <br> top:-3px; /* 是自身边框宽度的-1倍 */ <br> border-right:0px; <br> border-top:3px solid black; <br> border-bottom:3px solid black; <br> border-left:3px solid white; <br>} <br> <br> 尖角div<br>#right<br>{<br> width:400px;<br> height:250px;<br> border:3px solid; /* 边框宽度为3px */<br> position:relative;<br>}<br>.sp1,.sp2<br>{<br> display:block;<br> height:0px;<br> width:0px;<br> position:absolute;<br> font-size:0;<br> line-height:0;<br>}<br>.sp1<br>{<br> right:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */<br> top:40px; /* 它来确定尖角的位置 */<br> border-right:0px;<br> border-top:6px solid white; /* 注意颜色的变化 */<br> border-bottom:6px solid white;<br> border-left:6px solid black;<br>}<br>.sp2<br>{<br> right:6px; /* 是自身边框宽度的2倍 */<br> top:-3px; /* 是自身边框宽度的-1倍 */<br> border-right:0px;<br> border-top:3px solid black;<br> border-bottom:3px solid black;<br> border-left:3px solid white;<br>}</p> <p> 《完》