css 指向下一个的箭头怎么做

html-css014

css 指向下一个的箭头怎么做,第1张

就用div加css就能做出这种效果了.给你一个刚写的例子。

<div style='background:redheight:20pxwidth:30pxdisplay: inline-block'></div>

<div style='top:5pxheight: 0pxborder: 15px red solidwidth: 20pxborder-top-color: transparentborder-right-color: transparentborder-bottom-color: transparentdisplay: inline-blockposition: relativeleft: -4px'></div>

使用

当然，其他任意方向也是可以的，只需要控制旋转角度rotate即可。原理是构造了一个正方形，隐藏了其中的两条边left和bottom，然后进行旋转。

通过使用正方形左下两条边，并向下向右平移，再旋转，得到一个向下并居中的箭头