css实现尖角div

最新推荐文章于 2021-10-27 11:27:12 发布

第七琴弦

最新推荐文章于 2021-10-27 11:27:12 发布

阅读量825

点赞数

分类专栏： WEB开发文章标签： WEB开发 CSS HTML

WEB开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

尖角在上面

效果图：

<html>  
<head>  
<title>尖角div</title>  
<style type="text/css">  
#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;  
}  
  
</style>  
</head>  
  
<body>  
<div id="top">  
<span class="sp1">  
<span class="sp2"></span>  
</span>  
</div>  
</body>  
  
</html>

尖角在下面

效果图：

<html>  
<head>  
<title>尖角div</title>  
<style type="text/css">  
#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;  
}  
  
</style>  
</head>  
  
<body>  
<div id="bottom">  
<span class="sp1">  
<span class="sp2"></span>  
</span>  
</div>  
</body>  
  
</html>

尖角在左边

效果图：

<html>  
<head>  
<title>尖角div</title>  
<style type="text/css">  
#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;  
}  
  
</style>  
</head>  
  
<body>  
<div id="left">  
<span class="sp1">  
<span class="sp2"></span>  
</span>  
</div>  
</body>  
  
</html>

尖角在右边

效果图：

<html>  
<head>  
<title>尖角div</title>  
<style type="text/css">  
#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;  
}  
  
</style>  
</head>  
  
<body>  
<div id="right">  
<span class="sp1">  
<span class="sp2"></span>  
</span>  
</div>  
</body>  
  
</html>