纯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斜箭头给大家简单的介绍了一些,希望大家多看看。