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