使用css实现常用的三角效果

项目中三角：

.breadcrumb{
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        border-top: 1px solid #f9c700;
        .breadcrumb-title{
            text-align: center;
            font-size: @fontC;
            //通过定义一个伪类after
            &:after{
                position: absolute;
                content: '';
                left: 89px;
                top: 39px;
                border-top: 9px solid @colorM;
                //border-left和border-right换成透明色 才能形成三角形 不然是长方形
                border-left: 12px solid transparent;
                border-right: 12px solid transparent;
                //background-color: red;
            }
        }

详细讲解

实现三角形的方式很多种。比较简单又比较常用的是利用伪类选择器，在网页上也有很多用到这种效果，比如tips信息提示框。下面是自己写的实心三角形，原理其实很简单，代码都能看懂。

   
       "UTF-8">
       
       
   
   
       
class="tri_top">
         
       
class="tri_right">
       
       
class="tri_bottom">
      
       
class="tri_left">
        
   

空心三角形该怎样实现呢？看看以下代码，你会发现其实代码跟实心三角形的代码都是差不多。

    
        "UTF-8">
        
        
    
    
        
class="tri_top">
         
        
class="tri_right">
       
        
class="tri_bottom">
      
        
class="tri_left">
        
    

       写在最后的一个道理： 三角形往哪个方向，那个方向无需设置border，而相反方向设置border颜色，相邻两边的border设为透明。这样就可实现各个方向的三角形。

       实心三角形利用CSS中的伪元素· ：before实现，再利用border的transparent属性即可达到效果。而空心三角形是在空心三角形的基础上再加上伪元素：after实现。伪元素：before实现的是一个实心的三角形，伪元素：after实现的是空心的三角形，进而把实心的三角形覆盖，利用绝对定位的top与left的差值绝对了三角形线的粗细而达到如图的效果。