How to make a section separator like in the demo

[Barandum]

I try to get the same kind of arrow-down seprator as on the first section on the demo page here: https://theme.co/x/

Thank you already for your kind help.

[jade]

Hi there,

This could be added through a custom CSS.

Please add a class to the section where you want this to be added then add this CSS in the custom CSS (assuming the class you added is the-section):

.the-section {
    position: relative;
}

.the-section:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -25px;
    border-width: 25px;
    border-style: solid;
    border-color: #dbdbdb transparent transparent;
}

In case this doesn’t work, kindly provide the URL of your site so that we can check it.

Thank you.

[Barandum]

@Jade

the-section

Great! I almost got it. The only thing which does not work is the border around the triangle.

See here on my test-page (3rd section) https://gentlemen.zoom3.ch

I used the following CSS:

.the-section:before{
content: “”;
display: block;
position: absolute;
top: -1px;
left: 50%;
width: 0;
height: 0;
margin-left: -25px;
border-width: 25px;
border-style: solid;
border-color: #fff transparent transparent;
}

[ruenel]

Hello There,

Thanks for updating in! Sorry if the code did not work out. It lacks another block.Please have it updated and make use of this code:

.the-section:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -25px;
    border-width: 25px;
    border-style: solid;
    border-color: #e5e5e5 transparent transparent;
}

.the-section::after {
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -25px;
    border-width: 25px;
    border-style: solid;
    border-color: #fff transparent transparent;
}

Please let us know how it goes.

[Barandum]

@RueNel

.the-section:before {
content: “”;
display: block;
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -25px;
border-width: 25px;
border-style: solid;
border-color: #e5e5e5 transparent transparent;
}

.the-section::after {
content: “”;
display: block;
position: absolute;
top: -2px;
left: 50%;
width: 0;
height: 0;
margin-left: -25px;
border-width: 25px;
border-style: solid;
border-color: #fff transparent transparent;
}

perfect, now it works! Thx alot

[thai]

You’re most welcome.