純CSS寫的各種小三角和小箭頭

頭朝下的小三角

width:0;
height:0;
border:50px solid transparent;	//所有border都是透明的，
border-top-color:black;	//只有尖相對的方向border有顏色

　　

同理，頭朝上的小三角，只要把border-top-color改成border-bottom-color就可以啦

頭朝上的小三角

 聰明的你，肯定就知道頭朝左的小三角是border-right-color，頭朝右的小三角是border-left-corder了，那我就不再多說啦

 

根據這種小三角我們也很容易寫出向上、下、左、右的箭頭，下面我就寫一個頭朝下的箭頭

<div class="jiantou"></div>

.jiantou{
　　width: 14px;
　　height: 14px;
　　border-top: 5px solid #333;
　　border-right: 5px solid #333;
　　transform: rotate(45deg);
}

　　

原理很簡單，主要是border控制箭頭的方向和寬度，width和height要一樣大箭頭才會對稱效果如圖：

向右的小箭頭

 

 

同理，其他方向的小箭頭就都能寫出來啦。

 

還有就是小旗子，也是可以根據上面說到的小三角寫出來，只要把border和border-top-color的顏色值換一下，不顯示哪里哪里就是透明色，顯示的額地方就是你想要的顏色

width: 0;
height: 0;
border: 30px solid black;
border-bottom-color: transparent;

效果如圖：

　　 

還有就是四個角的小三角：左上角，左下角，右上角，右下角

左上角的小三角

width:0; 
height:0; 
border-left:50px solide transparent; 
border-bottom:50px solide black; 

右下角的小三角

width:0; 
height:0;
border-right:50px solide transparent; 
border-top:50px solide black; 

 

其實我覺得記着、這些沒啥用，然后就找到了規律

小三角在上邊就有border-top，在下邊就有border-bottom，左右都是相對的

還有左右方向一直是透明顏色，上下相對的一方是你想要的顏色

咋樣？也可能我說的不夠清楚，反正呢，就互相學習吧