css 箭头简单的样式实现效果

1.左箭头

  

 html:  <div class="a"></div>

 style: 

 .a {

          width: .3rem;
          height: .3rem;
          border-top: 2px solid #e6e6e6;
          border-right: 2px solid #e6e6e6;
          transform:  rotate(225deg)
 
     }
                 

 

2.右箭头

 

 

 html:  <div class="a"></div>

 style: 

    

      .a {

          width: .3rem;
          height: .3rem;
          border-top: 2px solid #e6e6e6;
          border-right: 2px solid #e6e6e6;
          transform:  rotate(45deg)
 
     }
                 

3. 实心箭头

 html:  <div class="a"></div>

 style: 

   

.a {

   width: 0;
   height: 0;
   border-width: 20px;
   border-style: solid;
   border-color: red #000 blue gray;

}

所以想要什么箭头直接更改border-color即可，添加  transparent 。

比如左箭头   border-color: transparent  transparent   transparent  #000 ;

4.三角形

    

div {

   border: 6px solid #fff;
    border-top: none;  /*去掉会变成原本的宽高12*/
    border-right-color: transparent;
    border-bottom-color: transparent;

}