Creating The Big Full Widht 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:

1:  section {  
2:  position: relative;  
3:  overflow: hidden;  
4:  }  

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:

1:  .big_triangle {  
2:    background-color: #286090;  
3:    height: 20px;  
4:  }  
5:  .big_triangle:before {  
6:    right: 50%;  
7:    border-right: 1000px solid transparent;  
8:    border-left: 1000px solid;  
9:  }  
10:  .big_triangle:after {  
11:    left: 50%;  
12:    border-left: 1000px solid transparent;  
13:    border-right: 1000px solid;  
14:  }  
15:  .big_triangle:after,  
16:  .big_triangle:before {  
17:    content: '';  
18:    position: absolute;  
19:    bottom: 0;  
20:    width: 50%;  
21:    z-index: 100;  
22:    border-bottom: 100px solid #FFF;  
23:    -moz-transform: rotate(0.000001deg);  
24:    -webkit-transform: rotate(0.000001deg);  
25:    -o-transform: rotate(0.000001deg);  
26:    -ms-transform: rotate(0.000001deg);  
27:    transform: rotate(0.000001deg);  
28:  }  

Heare is html example :

1:  <section class="big_triangle_wrapper">  
2:    <div class="container">  
3:      <div class="row">  
4:        <div class="col-md-12">  
5:          <h2 class="text-center">What We do</h2>  
6:          <p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>  
7:        </div>  
8:      </div>  
9:    </div>  
10:    <div class="big_triangle"></div>  
11:  </section>  

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.