純css實現小三角
阿新 • • 發佈:2019-01-27
<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為小三角的顏色。