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

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