Streaming live at 10am (PST)

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


#1

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!


#2

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

Pros:

  • Easy to do

Cons:

  • 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

Pros:

  • Really customisable and control over the whole thing

Cons:

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

If you need an example let me know.


#3

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