css小技巧 ----- 使用border制作一个小三角形图标

css样式

div {
	width: 0;
    height: 0;
    overflow: hidden;
    border-width: 7px;
    border-color: transparent transparent #10456b transparent;
    border-style: solid;
}

图标

解释

• 关于一个元素border的solid样式在一条边上实际上是一个梯型(当border的宽度足够大，并且给其余三条边设置为透明就能看出来)
• 这里把div标签的宽高设置为0，其content区域面积就为0，根据盒子模型来看，整个盒子就由border来占据了，所以这里变成了一个直角三角形(其余三条边设置为透明了)