Creating A Diagonal Separator

Probably one of the coolest and yet very simple dividers to produce.

**Note that this tutorial is geared toward Platform 5 users and may not work as intended for other frameworks or themes.**

The diagonal separator that we will be creating today is actually 2 diagonal separators in one but you can make them both the same color if you like.

As with the big triangle we first need to add some additional css to help out with overflow and positioning.

/* gives the section a relative position */
section {
position: relative;
}

/* catches the overflow from after/before */
.region-wrap.pl-region-wrap-template.pl-row.no-pad {
overflow: hidden;
}

The magic that is CSS

Now with the important stuff done we need to add the css that will create our diagonal look. As with the big triangle we will be using pseudo classes :before and :after to accomplish this.

/*diagonals*/
.ss-style-doublediagonal {
z-index: 1;
padding-top: 6em;
/***** bottom diagonal color *****/
background: grey;
}

.ss-style-doublediagonal::before,
.ss-style-doublediagonal::after {
top: 0;
left: -25%;
z-index: -1;
width: 150%;
height: 75%;
/****** top diagonal color or use inherit if you

want the color to match bottom color ******/
background: #dd3333;
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
position: absolute;
content: '';
pointer-events: none;
}

.ss-style-doublediagonal::before {
height: 50%;
background: inherit;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: 3% 0;
transform-origin: 3% 0;
}

The kind of separator is applied to the a section that will overshadow the one above it.  So you would add the class of ss-style-doublediagonal  to a container and the diagonal separator will appear on top of it with the colors you selected.

For more examples of these see here.

As previous stated this was inspired by Codrops

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


diagonal

Creating A Diagonal Separator

Published on by | Add Comment

Probably one of the coolest and yet very simple dividers to produce.

**Note that this tutorial is geared toward Platform 5 users and may not work as intended for other frameworks or themes.**

The diagonal separator that we will be creating today is actually 2 diagonal separators in one but you can make them both the same color if you like.

As with the big triangle we first need to add some additional css to help out with overflow and positioning.

/* gives the section a relative position */
section {
position: relative;
}

/* catches the overflow from after/before */
.region-wrap.pl-region-wrap-template.pl-row.no-pad {
overflow: hidden;
}

The magic that is CSS

Now with the important stuff done we need to add the css that will create our diagonal look. As with the big triangle we will be using pseudo classes :before and :after to accomplish this.

/*diagonals*/
.ss-style-doublediagonal {
z-index: 1;
padding-top: 6em;
/***** bottom diagonal color *****/
background: grey;
}

.ss-style-doublediagonal::before,
.ss-style-doublediagonal::after {
top: 0;
left: -25%;
z-index: -1;
width: 150%;
height: 75%;
/****** top diagonal color or use inherit if you

want the color to match bottom color ******/
background: #dd3333;
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
position: absolute;
content: '';
pointer-events: none;
}

.ss-style-doublediagonal::before {
height: 50%;
background: inherit;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: 3% 0;
transform-origin: 3% 0;
}

The kind of separator is applied to the a section that will overshadow the one above it.  So you would add the class of ss-style-doublediagonal  to a container and the diagonal separator will appear on top of it with the colors you selected.

For more examples of these see here.

As previous stated this was inspired by Codrops

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match