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 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

Learn more about using clip-path from this article

See which browsers support and when adoption of clip-path makes it mainstream

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s