DIV制作尖角效果

  •  作者:root
  •  发布于:2019-09-10 11:13:00
  •  栏目:WEB前端
  •  来源:本站
  •  共76人围观

首先,来看一下一个div的边框放大很多倍到底是什么样的:

[css] view plain copy

  1. <style>  

  2. div{  

  3.   width:0px;  

  4.   height:0px;  

  5.     

  6.   border-top:50px solid red;  

  7.   border-left:50px solid yellow;  

  8.   border-right:50px solid blue;  

  9.   border-bottom:50px solid purple;  

  10. }  

  11. </style>  

该div的实现效果如下:



如果将其中一条border设置为0px,例如说是border-top:

[css] view plain copy

  1. div{  

  2.   width:0px;  

  3.   height:0px;  

  4.   border-top:0px;  

  5.   border-left:50px solid yellow;  

  6.   border-right:50px solid blue;  

  7.   border-bottom:50px solid purple;  

  8. }  

则效果如下:



由上图我们可以继续试验出,如果只有一条边有颜色而其他边是背景色(或者transparent),就是实心div尖角实现的方法:

向上的:

[css] view plain copy

  1. div{  

  2.   width:0px;  

  3.   height:0px;  

  4.   border-top:50px solid white;  

  5.   border-left:50px solid white;  

  6.   border-right:50px solid white;  

  7.   border-bottom:50px solid purple;  

  8. }  


向下的:

[css] view plain copy

  1. div{  

  2.   width:0px;  

  3.   height:0px;  

  4.   border-top:50px solid red;  

  5.   border-left:50px solid white;  

  6.   border-right:50px solid white;  

  7.   border-bottom:50px solid white;  

  8. }  


向左的:

[css] view plain copy

  1. div{  

  2.   width:0px;  

  3.   height:0px;  

  4.   border-top:50px solid white;  

  5.   border-left:50px solid yellow;  

  6.   border-right:50px solid white;  

  7.   border-bottom:50px solid white;  

  8. }  


向右的:

[css] view plain copy

  1. div{  

  2.   width:0px;  

  3.   height:0px;  

  4.   border-top:50px solid white;  

  5.   border-left:50px solid white;  

  6.   border-right:50px solid blue;  

  7.   border-bottom:50px solid white;  

  8. }  


连上对话框一起:

[css] view plain copy

  1. div{  

  2.   position:relative;  

  3.   width:100px;  

  4.   height:100px;  

  5.   background:#ddd;  

  6.   

  7.   

  8. }  

  9. span{  

  10.   position:absolute;  

  11.   bottom:-10px;  

  12.   left:50px;  

  13.   width:0px;  

  14.   height:0px;  

  15.   border-top:5px solid #ddd;  

  16.   border-left:5px solid transparent;  

  17.   border-right:5px solid transparent;  

  18.   border-bottom:5px solid transparent;  

  19. }  


[html] view plain copy

  1. <div>  

  2. <span></span>  

  3. </div>  


*这里要注意,不显示的边不能直接设置成none;
那么空心的对话框该如何实现呢?


事实上空心的尖角,也就是内部是一种颜色,而且有边框的尖角,事实上是两个尖角叠加而成,上下定位有1px或者其他值得差别,内部的颜色是背景色,而外部是边框的颜色。比如:


[css] view plain copy

  1. div{  

  2.   position:relative;  

  3.   width:100px;  

  4.   height:100px;  

  5.   background:#fff;  

  6.   border:1px solid black;  

  7. }  

  8. .s1{  

  9.   position:absolute;  

  10.   bottom:-10px;  

  11.   left:50px;  

  12.   width:0px;  

  13.   height:0px;  

  14.   border-top:5px solid black;  

  15.   border-left:5px solid transparent;  

  16.   border-right:5px solid transparent;  

  17.   border-bottom:5px solid transparent;  

  18. }  

  19.   

  20. .s2{  

  21.   position:absolute;  

  22.   bottom:-9px;  

  23.   left:50px;  

  24.   width:0px;  

  25.   height:0px;  

  26.   border-top:5px solid #fff;  

  27.   border-left:5px solid transparent;  

  28.   border-right:5px solid transparent;  

  29.   border-bottom:5px solid transparent;  

  30. }  

html:

[html] view plain copy

  1. <div>  

  2. <span class="s1"></span>  

  3. <span class="s2"></span>  

  4. </div>  

转载请说明出处: 我的博客园» 欢迎来到博客

评论