css下拉菜单小三角形箭头的写法

242月

css下拉菜单小三角形箭头的写法

直接用css写出一个向下指的小三角行，以后就不用切图那么麻烦了

主要代码就是：

border-color: #666 #fff #fff;
	border-style: solid;
	border-width: 4px;

具体的演示
如图显示

代码：

.site {
	width:auto;
	height:auto;
	background-color:#fff;
	position:relative;
}
.site b {
	border-color: #666 #fff #fff;
	border-style: solid;
	border-width: 4px;
	position:absolute;
	top:7px;
}
<div class="site"> 这就是下拉的小三角形 <b> </b> </div>

同理一个向上指的三角形箭头

.site {
	width:auto;
	height:auto;
	background-color:#fff;
	position:relative;
}
.site b {
	border-color: #fff #fff #666;
	border-style: solid;
	border-width: 4px;
	position:absolute;
	top:3px;
}
</div class="site"> 这就是向上指的小三角形 <b> </b> </div>

分享到：