CSS绘制小三角形效果实现&扩展

CSS绘制小三角形效果实现&扩展

CSS小三角形在线生成工具

你可以在网页中很多地方看到三角形（小三角）：tooltips提示框、下拉菜单、返回顶部、甚至在loading载入动画里。不管你喜欢还是不喜欢，这些小元素对各UI元素之间的联系是很重要的。本文主要介绍利用CSS的实现方法：

border属性法（本文主要总结此方法）

(1) 上、下、左、右三角形的写法

首先我们来看一下border这个属性，当我们把一个div的border-color设为不同值的时候，可以看到四边都成了一个梯形。

#test{
width:50px; 
height:50px; 
border-width:50px; 
border-style:solid; 
border-color:#2DC9FE #FF7526 #0FDD06 #FFEC32;
}

如果我们继续把这个div的width和height都设为0，可以看到四边都成了一个三角形。

#test{
width:0; 
height:0; 
border-width:50px;