当前位置:编程学习 > html/css >>

css实现尖角div

尖角在上面

效果图:

 \


代码:


[html]
<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">
#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] 
<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">
#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]
<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; /* 是自身边框宽度

补充:web前端 , HTML/CSS  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,