现在的位置: 首页 > web前端 > 正文

纯css斜箭头如何实现

2020年07月16日 web前端 ⁄ 共 620字 ⁄ 字号 评论关闭

  纯css斜箭头这种斜箭头怎么实现。网上找了方法,设置四个方向的border,实现斜箭头。但是不能实现中间是透明的,求指教。


  纯css斜箭头的问题


  目前只找了个斜箭头,不过只是内斜的,不能向外斜,且不能透明


  width:0;


  height:0;


  border-left:57pxsolidtransparent;


  border-right:17pxsolidtransparent;


  border-top:30pxsolid#777;


  font-sie:0;


  纯css斜箭头的解答


  .line{


  position:relative;


  display:block;


  width:400px;


  height:200px;


  border:6pxsolid#65A7EF;


  }


  .line::after{


  content:'';


  position:absolute;


  width:82px;


  height:30px;


  border-right:8pxsolid#65A7EF;


  border-bottom:4.5pxsolid#65A7EF;


  transform:rotate(34deg)skew(51deg);


  left:133px;


  top:-18.7px;


  z-index:1;


  background:#fff;


  }


  总之,纯css斜箭头给大家简单的介绍了一些,希望大家多看看。

抱歉!评论已关闭.