1. 程式人生 > >純css實現小三角

純css實現小三角

<pre name="code" class="css">/*向上*/
.top{
    width:0px;
    height:0px;

    /*關鍵*/
    border-left:5px solid #FFFFFF; 
    border-right:5px solid #FFFFFF; 
    border-bottom:5px solid #BEBEBE;
}


/*向下*/
.bottom{ 
       width:0px;
       height:0px; 

       /*關鍵*/ 
       border-left:5px solid #FFFFFF; 
       border-right:5px solid #FFFFFF; 
       border-top:5px solid #BEBEBE;
}
/*向左*/
.left{
    width:0px;
    height:0px;

   /*關鍵*/
    border-top:5px solid #FFFFFF;
    border-bottom:5px solid #FFFFFF;
    border-right:5px solid #BEBEBE;
}
/*向右*/
.right{
    width:0px;
    height:0px;

   /*關鍵*/
    border-top:5px solid #FFFFFF;
    border-bottom:5px solid #FFFFFF;
    border-left:5px solid #BEBEBE;
}

其中,#BEBEBE為小三角的顏色。