Some of my most popular tutorials have been the series on Sectional Borders and separators.

The most popular has been the Diagonal Lines. One of the most common requests I get is how to reverse the angle so the it slopes downward from left to right instead of right to left. So here it is 🙂

 

Click Here To See Live Demo

Click Here To See Live Demo

Lets Get Started

 

First thing you need to do is assign a unique CSS Class to the section you would like the Diagonal border to be on top of.

1. Open the section settings

002

 

***Do not miss this step next step***

2. Scroll down to the bottom and assign it the following CSS Class: left-diagonal

 002

 

3. Select Save then update page.

004

 

 

The Magic of CSS

Now lets start to dazzle things up a bit with some CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not go to Divi>Theme Options. This will open up the ePanel. Now scroll down until you get to the Custom CSS box on the bottom of this page.

Add this CSS.

/*------------------------------------------------*/
/*----[Left Diagonal Lines - By Geno Quiroz]------*/
/*-----------------[Quiroz.Co]--------------------*/
/*------------------------------------------------*/

#et-main-area { overflow: hidden;} /* Hides all the items that float over the right margin */

.left-diagonal {
z-index: 1;
padding-top: 0px;}

.left-diagonal::after {
position: absolute;
content: '';
pointer-events: none;
top: -150px;
left: -25%;
z-index: -1;
width: 150%;
height: 50%;
background: inherit;
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
-webkit-transform-origin: -3% 0;
transform-origin: -3% 0;}

@media only screen and ( min-width: 1901px ) and ( max-width: 2500px ) {.left-diagonal::after {top: -150px; height: 85%;}}
@media only screen and ( min-width: 1501px ) and ( max-width: 1900px ) {.left-diagonal::after {top: -131px; height: 68%;}}
@media only screen and ( min-width: 1001px ) and ( max-width: 1500px ) {.left-diagonal::after {top: -116px;}}
@media only screen and ( max-width: 1000px ) {.left-diagonal::after {top: -90px;}}

 

 

Using The New Divi 2.5 Module Custom CSS Options

Using the Divi Module CSS Class option is an easy way for you to keep the code inside the module along with the content. This is great if you want to save this section in your Library and use it in other places or pages.

1. Open the section settings

005

 

2. Select Custom CSS

006

 

3. Insert this part of the CSS into the Main Element

007

 

4. And while you are still in there, add this to the After Element

008

 

5. Now you will still have to add this this little bit of CSS to the ePanel or Stylesheet to prevent the element from overflowing to the right and to keep it optimized for mobile.

 


/* Hides all the items that float over the right margin */
   #et-main-area { overflow: hidden;} 

/* optimized for mobile */
   @media only screen and ( min-width: 1901px ) and ( max-width: 2500px ) {.left-diagonal::after {top: -150px; height: 85%;}}
   @media only screen and ( min-width: 1501px ) and ( max-width: 1900px ) {.left-diagonal::after {top: -131px; height: 68%;}}
   @media only screen and ( min-width: 1001px ) and ( max-width: 1500px ) {.left-diagonal::after {top: -116px;}}
   @media only screen and ( max-width: 1000px ) {.left-diagonal::after {top: -90px;}}

 

And that’s it. I added the mobile queries that help make this work in larger screens and smaller screens to save you from headaches and wasted time.

Be sure to comment below and let me know how this worked for you. Would also love to see how you used it on your own projects.

Cheers!

Click Here To See Live Demo

Click Here To See Live Demo

 


Well that’s all for now. I hope you find this article useful.


DISCLOSURE: I may be an affiliate for some of the products that I recommend. If you purchase those items through my links I will earn a commission which helps cover the cost of the free resources we provide. If you ever have any questions about my affiliations, please do not hesitate to ask..

Pin It on Pinterest

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!