Docs

[mksubherw]

is there a way to add an upside down triangle to any section? It’s very common on websites.

[mksubherw]

my website for reference: http://www.softskillsfordesigners.com

another person this forum shared the triangle for reference:
http://screencast.com/t/6tGv9RLg6

I believe he had a different theme than me, so I didnt find this post helpful:
https://community.theme.co/forums/topic/adding-an-upside-down-triangle-in-the-content-band-border/

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.section-arrow {
	position: relative;
}
.section-arrow:after {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #0c1d43;
	left: 50%;
	position: absolute;
	margin-left: -20px;
}

After that add the section-arrow CSS class to the class field of your section.

Hope it helps 🙂

[mksubherw]

Thanks for the quick reply! Do I just add “section-arrow” to the Class for the section?

[Rue Nel]

Hello There,

Yes you need to add a custom section-arrow in the section settings.

Please let us know how it goes.

[mksubherw]

Didn’t work. :/ Am I adding the code right? I’ve added it to the class, within the “Row” settings.

See attached image.

[Thai]

Hi There,

Please add section-arrow class to your section NOT row:

http://i.imgur.com/8vupx2U.png

Regards!

[mksubherw]

Fantastic! it worked!

is there a way to change the color of the triangle within the section? sometimes I need it to be white, other times I want it to be purple.

[mksubherw]

And is there a way to make the triangle bigger?

[John Ezra]

Hi there,

Thanks for updating the thread! Please change previously provided CSS to the following:

.section-arrow {
	position: relative;
}
.section-arrow:after {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #0c1d43;
	left: 50%;
	position: absolute;
	margin-left: -20px;
    margin-top:5px;
}

.section-arrow.gray:after {
    border-top: 20px solid #e6e5e6;
}

.section-arrow.white:after {
    border-top: 20px solid #ffffff;
}

.section-arrow.purple:after {
    border-top: 20px solid #141c41;
}

Then you can just add the class section-arrow gray or section-arrow white or section-arrow purple to your section class field.

Hope this helps – thanks!

[mksubherw]

thank you! you are most helpful!

[Joao]

Glad to hear it we managed to help.

Joao

[Author]

Posts