Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

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 🙂

 

Divider

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!

 


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


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest