576
社区成员




<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>
1)方式一,改为透明区域位置
右边不透明即可
border-color: transparent #099dff transparent transparent;
2)方式二,通过旋转
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
/*上边设置颜色-向下箭头*/
border-color: #099dff transparent transparent transparent;
/*下边设置颜色-向上箭头*/
border-color: transparent transparent #099dff transparent;