Cutout corners

How to do cutout corners and simulate negative border radius without images, by utilizing CSS gradients. It’s amazing how many CSS problems can be solved with gradients alone.


The transform property works perfectly if the desired outcome is a parallelogram. The “rotate” property value allows us to easily turn squares into diamonds, the “skew” value does the trick if you’re trying to achieve a parallelogram with non-right angles. Transforms are simple, readable and powerful to help you create dramatic effect with very little CSS. If diamonds, diagonal bars or really any other parallelogram is what you’re after, I suggest you head over to CSS Tricks to learn all about these values.


Diamond image

Hover over me!