CSS3画三角形原理及实例

前言

今天看到一到题目,如何用CSS3绘制一个三角形。发现了一个知识漏洞,下面将补充学习这个知识点。

CSS3绘制三角形的在页面的应用还是很常见的,比如一个下拉菜单的Logo。

那么该怎么实现呢?

实现

之前一直以为border边框是矩形的,如果只用border-top样式去添加边框的话的确如此,但是有一个问题就出来了,如果边框上下左右包裹时,并且赋予的颜色不一样的时候,那相邻边框的区界到底在哪里,最后会呈现出一个怎么样的边框呢?

.border {    
    width:50px;    
    height:50px;    
    border: 20px solid; 
    border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; 
    }

此处输入图片的描述

结果发现各个区块的边框实际居然是一个梯形状,而不是矩形。

实际假设为矩形的话,也可以想到,相邻之间的空间占据肯定无法分配,那么各占一半导致总体边框形状就变成了梯形。

接下来,我们尝试把div的内容宽高都给设成为 0px,只剩下边框宽度。

.border{  
  width:0px;  
  height:0px;  
  border: 50px solid;  
  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;  
} 

此处输入图片的描述

结果,最后最后变成一个正方形,而每一块的边框区域都快成三角形。

思路:
所以,绘制三角形的思路就是,把元素的宽和高都设置成0px,设置边框的宽度,然后根据需要的三角形位置进行设置。

注意的是,只设置一边的边框宽度颜色等属性的话,不会得到三角形,另外三边依然存在并且颜色为 black,我们需要做的是把另外三边用 transparent 给隐藏掉,才能得到一个纯三角形图案。

多种设置

当不设置下边框时,左右的边框会把下半部分切掉。

.border {  
  width: 0;   
  height:0;  
  border-top: 50px solid #ADFF2F;  
  border-right: 50px solid #BA55D3;
  border-left: 50px solid #FF0000; 
}  

此处输入图片的描述

当设置左边框,且上边框transparent的话,会把变成一个直角在左下角的直角三角形。

此处输入图片的描述

当只设置上右的边框,会得到上右边框相邻的正方行区域。

此处输入图片的描述

如果你把元素的宽高进行设置,那么就会发现内容宽和高所占用的空间其实在左下角。

此处输入图片的描述

当值设置上下的边框,那么会发现什么也不显示。

因为元素宽和高都为 0px,并且不在相邻位置,除非设置左右为透明。

此处输入图片的描述

实例运用

此处输入图片的描述

如何给上面的图片添加一个向下的三角形指引呢?

实现思路:
使用定位给伪类Div进行定位,利用大的红色三角形去覆盖小的白色三角形。

 div{
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    border: 2px solid #f00;
    position: relative;
}
div:before,div:after{
    content:"";
    width: 0;
    height: 0;
    position: absolute;
}
div:before{
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #f00; 
    top: 30px;
    left: 200px;    
}
div:after{
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 18px solid #fff; 
    top: 32px;
    left: 200px;    
}

效果如下

此处输入图片的描述

总结

关键要理解,当元素的宽高为 0px 的时候,对border宽度进行设置后,其实上下左右的border都是一个三角形。