How To Create A Simple Triangle Separator

Today's inspiration comes from the fine folks over at Codrops you can view the actual post here.

We will be recreating a simple triangle separator that can be used to divide content or just because it looks cool.

This is what we will be making.

 

Step 1

Decide where you want to add the separator. (It works best if you choose a container. )

Step 2

Navigate to the advanced options and you will need to add a couple of classes. Add the class section-rel and my-arrow to the container. Don't for get to save it.

***After some testing I found that it was more effective to get the id of the container and add a relative position to that.

So do not add a class  section-rel because with other separators the id works best.*** 

#your-container-id { position:relative; }

Step 3

Now in order for this to work we need to add some css to our custom LESS/CSS area.

Go to pagelines at the top of the page and choose LESS/CSS from the options and include this css into the area provide.

#your-container-id {
position: relative;
}

The purpose of this is to contain the arrow within the container. Without the relative position the arrow would be place at the top of the page and that's not where we want it.

Next we need to add the arrow by adding this css.

.my-arrow:after {
content: '';
display: block;
position: absolute;
width: 60px;
height: 60px;
background-color: #303030;
bottom: -30px;
left: calc(50% - 30px);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;
}

Return to the front of your site and give yourself a pat on the back.

Additional tips 

If you don't like arrows and would prefer a circle just add

border-radius: 50%;

I may touch on some the other separators at a later date if there is a demand for them.

But this is a start so if you have any questions post them in the comments below.

-Cheers

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 *


iheart pagelines

How To Create A Simple Triangle Separator

Published on by | Add Comment

Today's inspiration comes from the fine folks over at Codrops you can view the actual post here.

We will be recreating a simple triangle separator that can be used to divide content or just because it looks cool.

This is what we will be making.

 

Step 1

Decide where you want to add the separator. (It works best if you choose a container. )

Step 2

Navigate to the advanced options and you will need to add a couple of classes. Add the class section-rel and my-arrow to the container. Don't for get to save it.

***After some testing I found that it was more effective to get the id of the container and add a relative position to that.

So do not add a class  section-rel because with other separators the id works best.*** 

#your-container-id { position:relative; }

Step 3

Now in order for this to work we need to add some css to our custom LESS/CSS area.

Go to pagelines at the top of the page and choose LESS/CSS from the options and include this css into the area provide.

#your-container-id {
position: relative;
}

The purpose of this is to contain the arrow within the container. Without the relative position the arrow would be place at the top of the page and that's not where we want it.

Next we need to add the arrow by adding this css.

.my-arrow:after {
content: '';
display: block;
position: absolute;
width: 60px;
height: 60px;
background-color: #303030;
bottom: -30px;
left: calc(50% - 30px);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;
}

Return to the front of your site and give yourself a pat on the back.

Additional tips 

If you don't like arrows and would prefer a circle just add

border-radius: 50%;

I may touch on some the other separators at a later date if there is a demand for them.

But this is a start so if you have any questions post them in the comments below.

-Cheers

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