Streaming live at 10am (PST)

How to make overlaying divs with carets/arrows on the right side

I need to do something like this, ideally with each card as a div containing text and an icon. I know how to do it with custom CSS & SVG, but I didn’t know if anyone had an ideal workflow that would be better. Thanks in advance!

There are a few ways to achieve this:

  1. Insert an image triangle (svg, png) in every div you need it of the colour you need it


  • Easy to do


  • Not very customisable and if you need several of them this could be a nightmare.
  1. Create your own triangle with a div element and using CSS attributes


  • Really customisable and control over the whole thing


  • Not as easy to do if you don’t understand CSS

If you need an example let me know.

1 Like

Awesome, thank you so much. I’m going to experiment and see what is the best option