How to Create a Diagonal Shape Background in Top Header of Divi

by | May 1, 2019 | Divi Tutorial | 8 comments

In this quick, fun tutorial I show you how to create a Diagonal Background Shape in the Top Header of Divi. It’s a very simple, sleek way to add some life to your Divi header by giving your top header menu a different look. It’s also a great way to leave some room for an overlapping logo if you have a design that suites that look. And with this method, you can also create ANY look with CSS you want to go for! It’s not limited to this diagonal line design. We’re going to create this effect:

First things first, make sure you have a top menu created and enabled by checking the “Secondary Menu” button in Appearance > Menus. Then just add and tweak the code below to your liking!

Here’s the CSS I showed in the video:

#top-header {
    background-image: linear-gradient(150deg,rgba(255,255,255,0) 55%,#8dc63f 25%);
}

Be sure to place this in the Divi Custom CSS area or ideally Child Theme Stylesheet. See tutorial below for more info on that.

Like this tutorial? You’ll love my CSS Course.

Use coupon code “CSS30” for $30 OFF at checkout!