Is there a way to make a triangular, clickable box in html/css?

Question

Ok, so I want to develop a web portal page that can direct you to multiple websites that I have. I want to design it like this: Where each section is a clickable section with JS and when hovered it pops up a bit and fades into a picture of some sort. Anyways, my question is how would I get a div to be angled like this? I read about using the border trick to make a CSS triangle, but I don't believe that will work for this. I was also thinking if there were a way to use the CSS transform property somehow but I cannot like up the triangles uniformly around the page and then keep it scalable so it's responsive. Does anyone have any suggestions? Or is this even possible??

Answer 1

CSS offers something called clip-masks. This allows you to move past basic color shapes and allows for the shaping of images. This would look good when used as the links you want.

See more about clip-paths: https://css-tricks.com/almanac/properties/c/clip-path/

A useful site for deriving the actual CSS for the shape can be found here: https://bennettfeely.com/clippy/

This used in conjunction with media queries for responsiveness and absolute positioning for arrangement should get you where you want to be.

Answer 2

I found this site, maybe it will help:

CSS Triangle Generator

I think you can align different triangles with position: absolute too.