When I saw this in one of our designer’s comps, my first thought was to create a triangle SVG and overlay that. Or you could reach for the classic border mitering. But if we approach the problem a little less literally, a more elegant solution presents itself.
It helps to remember that a right triangle is just part of a square. Transforms will get you the triangle you need, then overflow: hidden takes care of the masking.
I’ve commented the hell out of the code below, so dive in.
Choose large enough values for the size of your square and pay close attention to what units you’re using to size the triangle, and you can get a proportionally-scaling, entirely responsive effect without reaching for svg, border-width, or (heaven help us) trigonometry.
