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

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 a swooshing section border with background image property.

https://pingendo.com/ provides insight and inspiration.

swoosh background

How to do it:

 {   
background-image: url(site-assets/cover_silver_flip_dark.jpg);
background-size: cover;
background-position: right top;
}

use an image like the one they’ve used

Leave a Reply

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