小编给大家分享一下纯css斜箭头的实现方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
纯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斜箭头的实现方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
