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.


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