纯css斜箭头的实现方法

发布时间：2021-03-05 13:57:45 阅读：250 作者：小新栏目：开发技术

小编给大家分享一下纯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斜箭头的实现方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！

向AI问一下细节

纯css斜箭头的实现方法

猜你喜欢

最新资讯

相关推荐

相关标签