Transparent row separator

[BG Anders]

BG Anders

February 5, 2018 at 5:40 pm

Hi Kadence Team,

i try to put a transparent row separator on every page like here: *Login to see link

and since the “normal” pagebuilder separator is not build for this,
i added my slider and separator on the first pagebuilder row (stretched):

<div class="wrap_header">
[kadence_slider_pro id="1"]
<div class="arrow"></div>
</div>

and styled like:

/* -------------ARROW ---------------*/
.wrap_header {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
margin: -10px;
}

.arrow {
position: absolute;
bottom: 1%;
width: 100%;
padding-bottom: 1%;
background-color: rgba(255, 255, 255, 1);
}
.arrow:before,
.arrow:after {
content: '';
position: absolute;
bottom: 95%;
width: 50%;
padding-bottom: 3%;
background-color: inherit;
}
.arrow:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(60deg);
-webkit-transform: skewX(60deg);
transform: skewX(60deg);
}
.arrow:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-60deg);
-webkit-transform: skewX(-60deg);
transform: skewX(-60deg);
}

but this is not working fantastic for smaller screen widths and any suggestion is welcome.

Now i try to use this on every page and it looks even worse: *Login to see link

2. Maybe you know a better way of adding this separator on every page? ..or show me what i’m doing wrong?

Thank you,
B.Anders