尖角在上面 效果图: 代码: [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> 尖角在下面 效果图: 代码: [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> 尖角在左边 效果图: 代码: [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> 尖角在右邊 效果圖: 程式碼: [html <br/>#right <br/>{ <br/> width:400px; <br/> height:250px; <br/>px <br/> } <br/>.sp1,.sp2 <br/>{ <br/> display:block; <br/> height:0px; <br/> width:0px; position:absolute; <br/>.sp1 <br/>{ <br/> right:-9px; /* 它的絕對值加上span的邊框寬度等於div邊框寬度的5倍*/ <br/> top:40px; /*order 它來決定尖角的位置*/<br/>p <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-left:3px solid white; <br/>} <br/> <br/>