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

This is #2 in a series of cool sectional dividers inspired by the techniques used on tympanus.net.  I even went in and implemented a few on my own website just for fun and to get in some practice http://montereypremier.com/portfolio/

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 triangles between sections in Divi using only CSS.

 

Click Here To View Live Demo

 

 

Lets Get Started

 

First thing you need to do is assign a unique CSS Class to the section you would like to have the triangles either above or below.

1. Open the section settings

001

 

2. Give it the following CSS Class: triangles

 001

 

 

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.


/*--------------------------------------------*/
/*------[Triangle Dividers - Quiroz.co]-------*/
/*--------------------------------------------*/

	.triangles::before, .triangles::after {position: absolute; content: ''; pointer-events: none;}

	.triangles::before, .triangles::after {
		left: 50%;
		width: 100px;
		height: 100px;
		-webkit-transform: translateX(-50%) rotate(45deg);
		transform: translateX(-50%) rotate(45deg);}

        /* Top arrow pointing down. Currently set as black. This can be removed if you don't want a top arrow */
    	    .triangles::before {top: -50px; background: #000;}

        /* Bottom arrow pointing down. Currently set to inherit the background of the section. This can be removed if you don't want a bottom arrow */
	     .triangles::after { bottom: -50px; z-index: 10; background: inherit;}

 

On some occasions this trick might put the triangle a little too close to the content in the section. To remedy this, just add a divider in between the content and the triangle and set its height at about 50.

This trick is ideal when you are working between sections with a solid background color and not an image. To change the triangle colors, just change this piece right here.

CSS

 

On the next tutorial, I will cover how to add a triangle that is transparent and shows the background image like I have on the header of my example 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? 😉

 

You Can See My Live Example Here

 

 


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!