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

最新推荐文章于 2021-06-21 01:42:16 发布

weixin_39534149

最新推荐文章于 2021-06-21 01:42:16 发布

阅读量425

点赞数

文章标签： html尖角效果

本文详细介绍了如何使用纯CSS技术在网页元素的不同位置（顶部、底部、左侧和右侧）创建尖角效果。通过调整边界宽度和位置属性，可以轻松地在不同方向上实现尖角。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下内容转自wyzhangchengjin123的博客 http://blog.youkuaiyun.com/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;

}