CSS实现小三角

**

1、CSS实现下半部分向上按钮

<div class="menusys">
	<span tabindex="0" class="menufont">公路</span>
</div>

.menusys{
	float:left;
	height:64px;
	width:88px;
	cursor:pointer;
	&:focus{	/*实现点击效果*/
		background: linear-gradient(#022281,#0b44c6);	/*实现上到下渐变效果*/
		&::after{
			content: "";
			position: absolute;
			left: 50%;	/*左右居中*/
			bottom: 0;	/*处于底部*/
			transform: translate(-50%,0);/*居中*/
			border:10px solid transparent;	/*三角形大小*/
			border-bottom-color: #E2EBF8;
			}
	}
}

2、向上三角形

<span></span>

span{
	position:absolute;
	right:50%;
	top:-16px;/*因为我设置三角形为8px*/
	height:0;
	width:0;
	linght-height:0;
	font-size:0;
	border:8px solid transparent;
}

以上两种都可以实现小三角形
相比较而言，第一种比较简单方便