纯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，左右都是相对的

还有左右方向一直是透明颜色，上下相对的一方是你想要的颜色

咋样？也可能我说的不够清楚，反正呢，就互相学习吧

转载于:https://www.cnblogs.com/eyed/p/7850486.html