How would one create a triangle container for an image (x-browser)?

Question

How would I create a DIV containing an IMG where the DIV cuts the image into a triangle, thereby displaying only part of the image though a triangle. So... ``` <div> <img src="some_image" /> </div> ``` Where the image is a square, but the DIV containing the image is a triangle.

Answer 1

Have you looked into the CSS property clip-path? It essentially lets you create your own polygon. As for support with x-browser, that's unknown to me. It looks widely supported by most popular modern browsers (excluding Safari).

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

I set up a codepen you can check out for an example here:

https://codepen.io/larobertson/pen/rgprgb

Assuming that works for your needs here are some more resources on shapes in CSS:

https://css-tricks.com/working-with-shapes-in-web-design/

https://css-tricks.com/clipping-masking-css/