This screencast shows how shape dividers in Elementor can be implemented in Oxygen.

Code in the above example:

PHP & HTML:

<div class="elementor-shape elementor-shape-bottom" data-negative="false">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
		<path class="elementor-shape-fill" opacity="0.33" d="M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z"></path>
		<path class="elementor-shape-fill" opacity="0.66" d="M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z"></path>
		<path class="elementor-shape-fill" d="M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z"></path>
	</svg>
</div>

CSS:

.elementor-shape[data-negative=false].elementor-shape-bottom, .elementor-shape[data-negative=true].elementor-shape-top {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}
.elementor-shape-bottom {
	bottom: -1px;
}
.elementor-shape {
	overflow: hidden;
	position: absolute;
	left: 0;
	width: 100%;
	line-height: 0;
	direction: ltr;
}

#section-2-276 .elementor-shape-bottom svg {
	width: calc(127% + 1.3px);
	height: 108px;
}
.elementor-shape svg {
	display: block;
	width: calc(100% + 1.3px);
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
svg:not(:root) {
	overflow: hidden;
}

#section-2-276 .elementor-shape-bottom .elementor-shape-fill {
	fill: #ffffff;
}
.elementor-shape .elementor-shape-fill {
	fill: #fff;
	-webkit-transform-origin: center;
	-ms-transform-origin: center;
	transform-origin: center;
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

Update:

If you wish to control the width and height of the shape dividers at smaller widths, you can add media queries like this and tweak according to your needs:

@media only screen and (max-width: 992px) {
  
  #section-2-276 .elementor-shape-bottom svg {
    height: 62px;
  }

}

@media only screen and (max-width: 768px) {
  
  #section-2-276 .elementor-shape-bottom svg {
    height: 42px;
  }

}

Note: Here is Mike’s page on the same topic.

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

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: