使用CSS3製做網站經常使用的小三角形

如今在前端開發中，常常會看到一些小三角形，如一些導航的下拉菜單，還有一些聊天信息的氣泡模式，不少時候咱們都是經過切圖片的方法來製做，今天零度給你們分享一個徹底經過css3實現的小三角效果。

先上html代碼：

<div class="arrow-up">
     <!--向上的三角-->
</div>
<div class="arrow-right">
    <!--向右的三角-->
</div>
<div class="arrow-down">
    <!--向下的三角-->
</div>
<div class="arrow-left">
    <!--向左的三角-->
</div>

我使用了四個div分別展現上下左右四個方向的箭頭，下面是css代碼：

/*箭頭向上*/
.arrow-up {
    width:0; 
    height:0; 
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    border-bottom:30px solid #f00;
}

/*箭頭向右*/
.arrow-right {
    width:0; 
    height:0; 
    border-top:20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid green;
}
    
 /*箭頭向下*/
.arrow-down {
    width:0; 
    height:0; 
    border-left:40px solid transparent;
    border-right:40px solid transparent;
    border-top:40px solid #ccc;
}
    
 /*箭頭向左*/
.arrow-left {
    width:0; 
    height:0; 
    border-top:30px solid transparent;
    border-bottom:30px solid transparent; 
    border-right:30px solid #00f; 
}

這樣出來的效果就是這樣：

顏色和大小固然能夠隨意控制，這樣之後咱們就不須要切圖了，直接使用css會更簡單。