根据CSS边框完成3角形和箭头的案例编码

日期：2021-01-20 类型：科技新闻 

关键词：在线网页制作，建网页，个人简介网页制作，简单网页，建立网页

1、CSS盒子实体模型

盒子包含：margin、border、padding、content
边框交界处处展现光滑的斜线，运用此特性，根据设定各边框宽度和色调能够获得小3角等。
div元素是块级元素，显示信息为块框，能够运用它来实际完成。

<div class="triangle "></div>
<div class="arrow"></div>

**例1、**1般设定高宽比、宽度及边框后，盒子展现以下图：

.triangle {
   width: 25px;  
   height: 25px;  
   overflow: hidden;
   font-size: 0;
   line-height: 0;            
   border-width: 50px;               
   border-style: solid;
   border-color: rgb(235, 54, 241) rgb(86, 245, 139) rgb(76, 0, 255) rgb(46, 205, 245);
}

注：设定overflow、font-size、line-height，是由于在IE6下会具备默认设置的字体样式尺寸和行高, 致使盒子展现被撑开的长矩形框。

例2、将例1中的宽度和高宽比设定为0后，盒子展现以下图：

.triangle {
  width: 0;  
  height: 0;  
  overflow: hidden;
  font-size: 0;
  line-height: 0;            
  border-width: 50px;               
  border-style: solid;
  border-color: rgb(235, 54, 241) rgb(86, 245, 139) rgb(76, 0, 255) rgb(46, 205, 245);
}

此时，能够看到盒子是由4个3角形构成的。假如只保存1种色调, 将别的3种色调设定为全透明或与情况同色, 就可以完成3角形。依据挑选留下不一样部位的边，能够展现出不一样房屋朝向的3角形。

例3、只保存底边

.triangle {
   width: 0;  
   height: 0;  
   overflow: hidden;
   font-size: 0;
   line-height: 0;            
   border-width: 50px;               
   border-style: solid;
   border-color: transparent transparent rgb(76, 0, 255) transparent;
}

例4：在例3中的宽度和高宽比保存，能够获得梯形

width: 0;  
height: 0;

例5、完成箭头

箭头实际上是根据2个3角形移位叠加来完成的。
用错开1px的白色3角形遮盖蓝色3角形，产生箭头。

下面的款式完成了1个向上箭头：

. arrow {
   position: absolute;
}
. arrow:before,. arrow:after{
   position: absolute;
   content: '';
   border-top: 10px transparent solid;
   border-left: 10px transparent solid;
   border-right: 10px transparent solid;
   border-bottom: 10px #fff solid;
}
. arrow:before{
   border-bottom: 10px #0099CC solid;
}
. arrow:after{
   top: 1px; /*遮盖并错开1px*/
   border-bottom: 10px #fff solid;
}

总结

以上所述是网编给大伙儿详细介绍的根据CSS边框完成3角形和箭头的案例编码，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！

上一篇：4大經典的手机微信营销推广技巧 返回下一篇：没有了