【前端】通过CSS样式设置箭头图标

[全栈小5]

1、箭头向右

<style>
.arrow-right{
    display:inline-block;
}

.arrow-right::before{
content:'';
display:inline-block;
width:0px;
height:0px;
border-style:solid;
border-width:20px;
border-color: transparent transparent transparent #099dff;
/*
    border-color:上边 右边 下边 左边
    transparent：表示透明的意思
*/
}
</style>
<div class="arrow-right"></div>

2、箭头向左

1）方式一，改为透明区域位置
右边不透明即可

border-color: transparent #099dff transparent transparent;

2）方式二，通过旋转

-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);

3、箭头向上和向下同上

/*上边设置颜色-向下箭头*/
border-color: #099dff transparent transparent transparent;
/*下边设置颜色-向上箭头*/
border-color: transparent transparent #099dff transparent;