html尖角效果,css实现尖角div

以下内容转自wyzhangchengjin123的博客 http://blog.csdn.net/wyzhangchengjin123/article/details/8028905

尖角在上面

效果图：

尖角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;

}

尖角在下面

效果图：

尖角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;

}

尖角在左边

效果图：

尖角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;

}

尖角在右边

效果图：

尖角div

#right

{

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

{

right:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */

top:40px; /* 它来确定尖角的位置 */

border-right:0px;

border-top:6px solid white; /* 注意颜色的变化 */

border-bottom:6px solid white;

border-left:6px solid black;

}

.sp2

{

right:6px; /* 是自身边框宽度的2倍 */

top:-3px; /* 是自身边框宽度的-1倍 */

border-right:0px;

border-top:3px solid black;

border-bottom:3px solid black;

border-left:3px solid white;

}