背景: 項(xiàng)目過(guò)程中有個(gè)tab切換需要用到空心三角形的效果。作為一名后端工程師,實(shí)在是不知道怎么寫(xiě),在網(wǎng)上找了一些看了一下別人的實(shí)現(xiàn)方式,發(fā)現(xiàn)大多數(shù)都是實(shí)心三角。后來(lái)終于發(fā)現(xiàn)一個(gè)實(shí)現(xiàn)空心三角的,頓時(shí)熱淚盈眶啊。實(shí)現(xiàn)效果比較粗略,不過(guò)還是思路還是比較清晰的,借鑒了一下,在原有的基礎(chǔ)上做了一些改進(jìn),增加一些效果
空心三角原理:主要利用元素偽類(:before,:after)實(shí)現(xiàn)
效果圖:
ps:移入換色
實(shí)現(xiàn)代碼:
新聞熱點(diǎn)
疑難解答
圖片精選