MADE WITH BY SUPADEZIGN

Feel free to donate if you like my tutorials ;)

How to add a shape divider

SHAPE DIVIDER

FOR OXYGEN BUILDER

There are many ways to add shape dividers but I think this one is the easiest one.

Step 1

Add a new section + whatever you want inside

Step 2

Add a Code Block (inside the section) and in the PHP&HTML panel, add your SVG datas :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 407.65" preserveAspectRatio="none"><path d="M751.32 187.47C613 235 462.72 218.9 318.61 225 200.89 230 48.86 251.53 0 407.65h1000V0c-64.23 92.19-152 154.24-248.68 187.47z" opacity=".25"/><path d="M777.61 210.75c-123.72 42.52-258.09 28.11-387 33.57-105.24 4.46-241.2 23.68-284.89 163.33H1000V43.1C942.56 125.54 864.09 181 777.61 210.75z"/></svg>

Step 3

The following CSS is the basic CSS for most of the shapes I provide. You just have to replace the section id.
To adjust the size, you can change the height or/and the width, and to change the color, you just have to modify the fill.

#section-7-25 {
	position: relative;
	overflow: hidden;
}

#section-7-25 svg {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 200px;
	fill: #D72D46
}

To put the shape on top, replace bottom:0 by top:0.
To reverse the shape horizontally and vertically, add transform:scale(-1,-1);

#section-26-271 {
    position: relative;
    overflow:hidden
}

#section-26-271 svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    fill: #FF5252;
    transform:scale(-1,-1);
}

How to make banners

Instead of using section, we can use some Divs, and change the CSS. Here are two examples :

BANNER DESIGN

Inside a banner, as a "background", it's exactly the same CSS :

#div_block-37-271 {
    position: relative;
    overflow: hidden;
}

#div_block-37-271 svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120%;
    height: 220px;
    fill: rgba(0, 0, 0, 0.22)
}

BANNER DESIGN

Under the banner, we have to remove the overflow:hidden (or it won't be visible) and the bottom must be negative :

#div_block-49-271 {
    position: relative;
}

#div_block-49-271 svg {
    position: absolute;
    bottom: -150px;
    left: 0;
    width: 100%;
    height: 150px;
    fill: #8ED7C7;
    transform:scale(1,-1);
}