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 Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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