Creating the Big Triangle Separator

In this brief tutorial I will  be showing you how to add a big triangle that will add a bit of flare to your designs.

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

To begin we need to add some important css. The first bit of css will give the sections a relative position this will help contain the before and after elements we will add. Next we need to contain any overflow that might happen so you don't get a scroll bar at the bottom of your webpage.

Here is the CSS we will be adding:

/* 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;
}

Adding the triangle effect

Let me explain how the effect works.

The triangle effect is applied  to the section above to give the illusion that it is part of the one below it. So the color of the triangle should match the color of the section that it is on top of. I hope that make sense if not be sure to leave a post in the comments.

For the effect we will be use the pseudo classes :before and :after .

Here is the CSS for the big triangle:

/* big triangle */
.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;
}

.big-triangle:after, .big-triangle:before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 50%;
    z-index: 100;
/*  change the hieght and the color below */
    border-bottom: 160px solid #1e73be;
    -moz-transform: rotate(0.000001deg);
    -webkit-transform: rotate(0.000001deg);
    -o-transform: rotate(0.000001deg);
    -ms-transform: rotate(0.000001deg);
    transform: rotate(0.000001deg);
}

To have the triangle show up we will need to add the class of big-triangle to the container.

If you have done everything correctly you should see your triangle. To view some other examples visit here.

Congratulations.

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

5 Responses to "Creating the Big Triangle Separator"
  1. Hi, John to turn it upside down you need to change the bottom: 0; to top: 0;

    And also change border-bottom: to border-top:

    I hope that makes sense to you. you can finds it under this class .big-triangle:after, .big-triangle:before

Leave a Reply

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


Creating the Big Triangle Separator

Published on by | 5 Comments

In this brief tutorial I will  be showing you how to add a big triangle that will add a bit of flare to your designs.

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

To begin we need to add some important css. The first bit of css will give the sections a relative position this will help contain the before and after elements we will add. Next we need to contain any overflow that might happen so you don't get a scroll bar at the bottom of your webpage.

Here is the CSS we will be adding:

/* 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;
}

Adding the triangle effect

Let me explain how the effect works.

The triangle effect is applied  to the section above to give the illusion that it is part of the one below it. So the color of the triangle should match the color of the section that it is on top of. I hope that make sense if not be sure to leave a post in the comments.

For the effect we will be use the pseudo classes :before and :after .

Here is the CSS for the big triangle:

/* big triangle */
.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;
}

.big-triangle:after, .big-triangle:before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 50%;
    z-index: 100;
/*  change the hieght and the color below */
    border-bottom: 160px solid #1e73be;
    -moz-transform: rotate(0.000001deg);
    -webkit-transform: rotate(0.000001deg);
    -o-transform: rotate(0.000001deg);
    -ms-transform: rotate(0.000001deg);
    transform: rotate(0.000001deg);
}

To have the triangle show up we will need to add the class of big-triangle to the container.

If you have done everything correctly you should see your triangle. To view some other examples visit here.

Congratulations.

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

5 Responses to "Creating the Big Triangle Separator"
  1. Hi, John to turn it upside down you need to change the bottom: 0; to top: 0;

    And also change border-bottom: to border-top:

    I hope that makes sense to you. you can finds it under this class .big-triangle:after, .big-triangle:before

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