cuttingcornersblogpost.jpg

Div Hacking: Chopping Off Corners

So you need a triangle shape in the corner of a div. Maybe it's just a graphical flourish. Maybe you're using it as a backdrop for an icon. I don't know why. I'm not judging. Sometimes you just need triangles.

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.

Recommend