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.

This is #3 in a series of cool sectional dividers inspired by the techniques used on tympanus.net.  The tips on tympanus.net are pretty much self explanatory when you dig into the stylesheet but may be a little intimidating to non-css folks.

There are just a few things you have to adjust in Divi. So here is a novice-friendly step by step tutorial for creating transparent triangles between sections in Divi using only CSS.

Divider

 

Lets Get Started

 

First thing you need to do is assign a unique CSS Class to the section you would like to have the triangle on the bottom of.

1. Open the section settings

001

 

2. Give it the following CSS Class: big-triangle

 02

 

 

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 Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)

Add this CSS.


/*------------------------------------------------*/
/*------[Big Invisible Triangle - Quiroz.co]------*/
/*------------------------------------------------*/

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

.big-triangle:after,.big-triangle:before {
	content:'';
	position:absolute;
	bottom:0;
	width:50%;
	z-index:100;
	border-bottom:50px solid #22262e;
	-moz-transform:rotate(0.000001deg);
	-webkit-transform:rotate(0.000001deg);
	-o-transform:rotate(0.000001deg);
	-ms-transform:rotate(0.000001deg);
	transform:rotate(0.000001deg);}

.big-triangle:before{
	right:50%;
	border-right:1000px solid transparent;
	border-left:1000px solid;}

.big-triangle:after{
	left:50%;
	border-left:1000px solid transparent;
	border-right:1000px solid;}

 

Now suppose you want a smaller triangle like this one.

04

 

Well then you can use this instead

 

/*---------------------------------------------------*/
/*------[Little Invisible Triangle - Quiroz.co]------*/
/*---------------------------------------------------*/

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

.big-triangle:after,.big-triangle:before {
	content:'';
	position:absolute;
	bottom:0;
	width:50%;
	z-index:100;
	border-bottom:50px solid #22262e;
	-moz-transform:rotate(0.000001deg);
	-webkit-transform:rotate(0.000001deg);
	-o-transform:rotate(0.000001deg);
	-ms-transform:rotate(0.000001deg);
	transform:rotate(0.000001deg);}

.big-triangle:before{
	right:50%;
	border-right:75px solid transparent;
	border-left:1000px solid;}

.big-triangle:after{
	left:50%;
	border-left:75px solid transparent;
	border-right:1000px solid;}

 

This trick is ideal when the background in the section below is a solid color and not an image. To blend colors just change this piece right here.

03

 

On the next tutorial, I will cover how to add a pinched triangle like the one I have just below the number counter on my demo page.

I love providing these tutorials for free but for those of you who use these to your financial gain, might you consider buying this poor guy a coffee? 😉

 

 


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 Services | John 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