Today I learned a very efficient way to create triangular cutouts using solid colored and transparent css borders.

The angle of the triangle cutouts can be changed by adjusting the widths of the borders and the height of the mask div.

For best view of Results, click “Edit On CodePen”

See the Pen CSS Triangle Image Mask by Miguel Lozano (@MiguelDotL) on CodePen.