This screencast shows how Thrive Architect’s shape dividers can be manually implemented in Oxygen.

Watch the video to get some context on the codes below.

Code Block’s HTML:

<div class="tve-page-section-out"><svg version="1.1" id="Layer_1" xmlns="" xmlns:xlink="" x="0px" y="0px" viewBox="0 0 1000 154.9" style="enable-background:new 0 0 1000 154.9;" xml:space="preserve" data-position="bottom" data-ct="38071" decoration-type="Waves 03" class="svg-shape-bottom" width="100%" preserveAspectRatio="none" data-css="tve-u-169d1dc70bc">
<style type="text/css">
<path class="p169d1dc70b9" d="M1000,90.6c-60.3-52.9-150.8-69.7-226-41.2c-23.2,8.8-44.8,21.4-68.6,28.4c-35.2,10.4-72.9,7.8-109.3,2.7
<path class="p169d1dc70ba" d="M1000,139.1C939.7,87,845.6,91.8,770.1,120.9c-59.9,23.1-92.4-21.6-173.7,0C499.9,146.6,474.7,66.4,412,52

Code Block’s CSS:

[data-css="tve-u-169d1dc70bc"] {
	height: 177px;
	bottom: 0px;
	fill: rgb(255, 255, 255);

@media only screen and (max-width: 992px) {
	[data-css="tve-u-169d1dc70bc"] {
		height: 120px;

@media only screen and (max-width: 768px) {
	[data-css="tve-u-169d1dc70bc"] {
		height: 80px;

Sitewide CSS:

.tve-page-section-out {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;

.svg-shape-top {
	position: absolute;

Here’s a different video on the same topic by Supa Mike:

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: