css3实现尖角,css3如何做 尖角

css3做尖角的方法：首先创建一个HTML示例文件；然后确定尖角的位置；最后通过给指定div设置属性为“top:6px;left:-3px;border-top:0px;border-bottom...”来实现尖角效果即可。

本教程操作环境：windows7系统、css3版、thinkpad t480电脑。

尖角在上面

效果图：

代码：

尖角p

#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的边框宽度等于p边框宽度的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;

}

尖角在下面

效果图：

代码：

尖角p

#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的边框宽度等于p边框宽度的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;

}

尖角在左边

效果图：

代码：

尖角p

#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的边框宽度等于p边框宽度的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;

}

尖角在右边

效果图：

代码：

尖角p

#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的边框宽度等于p边框宽度的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;

}