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

Code in the above example:


<div class="elementor-shape elementor-shape-bottom" data-negative="false">
	<svg xmlns="" 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>


.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);


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?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: