css---border属性实现小三角型

原理：

通过设置border的颜色，显示其中一边，隐藏其他三边，来获取到三角形。

用到了CSS3属性transparent：被延伸到任何一个有color值的属性上。在这里可理解为设置成透明

css样式加动画：

<span style="white-space:pre">      </span>
	.triangle{  
            position: relative;  
        }  
        .triangle:after /*after伪类，在triangle类后面添加一个三角形*/  
        {  
            content: "";  
            width: 0;  
            height: 0;  
            border-width: 20px;  
            border-color: #ccc transparent  transparent  transparent;  
            border-style: solid;  
            /*font-size: 0;  
            overflow: hidden;  
            line-height: 0;  
            position: absolute;*/ /*如果三角形显示成梯形，就添加注释掉的三个样式*/  
            top: 45%;  
            transition: all .2s; /*添加过渡动画*/  
        }  
        .triangle:hover::after{   
            position: absolute;  
            top: 5px; /*根据情况定义*/  
        }  
        @keyframes rotate1{  
            from{transform: rotate(0deg);}  
            to{transform: rotate(180deg);}  
        }