CSS巧用边框设置小三角

需求： 弹出下拉菜单显示一个小三角，如下图
其实我们可以利用css边框实现，我们先来看下这段代码

.box {
	width: 0;
    height: 0;
    border-top: 30px solid pink;
    border-right: 30px solid red;
    border-bottom: 30px solid blue;
    border-left: 30px solid green;
}

效果图如下
我们进一步优化，做出箭头朝上的，我们只需保留下边的边框，其他三个边框颜色设为透明即可。

.box {
	width: 0;
    height: 0;
    border: 30px solid transparent;
    border-bottom: 30px solid blue;
}

解决方案：

<div class="box"> 
	<span> </span>
</div>

.box{
	position: relative;
	width: 120px;
	height: 120px;
	background-color: red;
}
.box span {
	position: absolute;
	right: 30px;
	/* 这里的上边偏移包括 上下边框宽度 所以是20px*/
    top: -20px;
	width: 0;
	height: 0;
	/*如果考虑到兼容性请添加下边两个属性*/
	line-height: 0;
    font-size: 0;
	border: 10px solid transparent;
	border-bottom-color: red;
}

OK，下拉小三角已经完成，大家加油