三角小标志

实心三角:

  i{

    display: inline-block;

    width:0;

    height:0;

    border-width:20px;

    border-style:solid;

    border-color:#000 transparent transparent transparent;

   }

 

空心箭头:

<i class="i1 i2 ">
</i>

.i1{
display: inline-block;
width: 7px;
height: 7px;
border-top: 1px solid #999;
border-right: 1px solid #999;
}

.i2  {
transform: rotate(-45deg);
}

.i2  {
transform: rotate(135deg);
}

.i2 {
transform: rotate(-135deg);
}

.i2  {
transform: rotate(45deg);
}

posted @ 2019-08-02 10:03  菜鸟乐谷  阅读(184)  评论(0编辑  收藏  举报