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;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值