The Preview
Since you’re already ON this website.. look up at the upper left corner of the header. Yeah
Right there.
Then someone asked me how I did it. So here’s the tutorial on that.
The Video
The Code
#main-header { overflow: hidden; position: relative; } #main-header:before { content: ""; position: absolute; display: block; top: -76px; /* Play around with the value to get what you want */ left: -106px; /* Play around with the value to get what you want */ width: 260px; /* Play around with the value to get what you want */ height: 145px; /* Play around with the value to get what you want */ background: #d00; /* Play around with the color to get what you want */ transform: rotate(-45deg); /* Play around with the value to get what you want */ transition: .3s all ease-in-out; } /* This is for the header on scroll */ #main-header.et-fixed-header:before { top: -76px; /* Play around with the value to get what you want */ left: -106px; /* Play around with the value to get what you want */ transition: .3s all ease-in-out; }To add custom CSS, either..
- Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
- Add it to the Custom CSS field in Divi > Theme Options > General or..
- Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
- You could use a plugin like this one so you can keep the customizations separate from the theme.
(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)
Pretty simple, right?
PS. If you use a gradient background, sometimes it looks blurry, and I don’t like blurry objects. So I think it’s a low-skill level method.
Need to learn CSS?

Photo by Joanna Kosinska on Unsplash