Angled Edges with CSS Masks and Transforms

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

Jeremy Frank with a very simple and clever way to have elements not end perfectly horizontally, but at an angle:

.section {
  clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);

Just make sure there is enough bottom padding so nothing important gets cut off.

Direct Link →