Realize hollow triangle

WBOY
Release: 2016-09-11 11:19:52
Original
2164 people have browsed it

Background: During the project, there was a tab switching that required the effect of a hollow triangle. As a back-end engineer, I really don’t know how to write it. I looked up some other people’s implementation methods on the Internet and found that most of them are solid triangles. Later, I finally found one that realized a hollow triangle, and my eyes filled with tears. The implementation effect is relatively rough, but the idea is still relatively clear. I learned from it and made some improvements on the original basis to add some effects

Hollow Triangle Principle: Mainly implemented using element pseudo-classes (:before,:after)

Rendering: ps: Move in color change

Implementation code: