如上图,请问这种斜箭头怎么实现。网上找了方法,设置四个方向的border,实现斜箭头。但是不能实现中间是透明的,求指教。
目前只找了个斜箭头,不过只是内斜的,不能向外斜,且不能透明
width: 0;
height: 0;
border-left: 57px solid transparent;
border-right: 17px solid transparent;
border-top: 30px solid #777;
font-sie: 0;
如上图,请问这种斜箭头怎么实现。网上找了方法,设置四个方向的border,实现斜箭头。但是不能实现中间是透明的,求指教。
目前只找了个斜箭头,不过只是内斜的,不能向外斜,且不能透明
width: 0;
height: 0;
border-left: 57px solid transparent;
border-right: 17px solid transparent;
border-top: 30px solid #777;
font-sie: 0;
如果是这种箭头用CSS做的话,我想可以做两个外形一样,但大小不一样的,大三角是白色,小三角是蓝色,小三角盖住大三角。但即使能做出来,估计也没人这么干。我以前在几个网站上见过类似的这种箭头,无一例外都是用的小三角的背景图。只有纯色的三角才会有的网站用CSS的border做。
之前看到过用纯css画了一个很复杂的动画人物,可以看出css还是挺强大的,不过目前来说,用css画图确实不怎么样,可以考虑用canvas
,或者直接叫美工画一个。如果非要用css,可以去网上找找,应该有类似文章,不过归根结底都不是非常规范的做法,而且兼容性也可能有问题。
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决