Angled Edges with CSS Masks and Transforms

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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 →