**
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;
}
以上两种都可以实现小三角形
相比较而言,第一种比较简单方便