Super Borders Tutorial on Angular and Non-Standard Borders — Part 1

Web design trends of recent continue to push the boundaries on the status quo of rectangular layouts.

One way this manifests is in the border between two sections of a webpage. Often the borders are angled, sometimes curved, but visually interesting for sure.

In this post we’ll look at one way to approach the section border.

Create an angled section border using clip-path

https://bootstrapstudio.io/ provides insight and inspiration.


How to do it

clip-path: polygon(0 25px,100% 0,100% calc(100% - 25px),0 100%);

Other resources on clip-path include:

Make your own unique shapes with this helpful tool https://bennettfeely.com/clippy/

Learn more about using clip-path from this article https://alligator.io/css/clipping-with-clip-path/

See which browsers support and when adoption of clip-path makes it mainstream https://caniuse.com/#feat=css-clip-path

Leave a comment

Your email address will not be published. Required fields are marked *