Transparent arrow in CSS (CSS triangle, borders)
In CSS, as you may know, it’s possible to create arrows just by playing with borders.
Below, you’ll find a link for quickly generating the necessary CSS code for colored triangles. But what if you want a triangle that acts like a kind of mask, a sort of transparent triangle ?
Creating a transparent triangle in CSS
Here is a way to achieve a transparent arrow using only this CSS border principle :
See the Pen YZRYrY by habai (@jhabai) on CodePen.
Exploring further into CSS arrows/triangles