Wavy shape with css
I'm not sure it's your shape but it's close - you can play with the values:
https://jsfiddle.net/7fjSc/9/
#wave { position: relative; height: 70px; width: 600px; background: #e0efe3;}#wave:before { content: ""; display: block; position: absolute; border-radius: 100% 50%; width: 340px; height: 80px; background-color: white; right: -5px; top: 40px;}#wave:after { content: ""; display: block; position: absolute; border-radius: 100% 50%; width: 300px; height: 70px; background-color: #e0efe3; left: 0; top: 27px;}
<div id="wave"></div>
How can I create a wavy shape CSS?
Here is an idea with radial-gradient
and CSS variables where you can easily control the shape:
.wave {
--c:red; /* Color */
--t:5px; /* Thickness */
--h:50px; /* Height (vertical distance between two curve) */
--w:120px; /* Width */
--p:13px; /* adjust this to correct the position when changing the other values*/
background:
radial-gradient(farthest-side at 50% calc(100% + var(--p)), transparent 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t))),
radial-gradient(farthest-side at 50% calc(0% - var(--p)), transparent 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t)));
background-size:var(--w) var(--h);
background-position:calc(var(--w)/2) calc(var(--h)/2),0px calc(var(--h)/2);
border:1px solid;
margin:5px 0;
display:inline-block;
width:300px;
height:150px;
}
<div class="wave"></div>
<div class="wave" style="--w:200px;--h:40px;--p:10px; --t:8px;--c:purple"></div>
<div class="wave" style="--w:80px ;--h:20px;--p:5px; --t:3px;--c:blue;"></div>
<div class="wave" style="--w:100px;--h:30px;--p:14px;--t:10px;--c:green;"></div>
Top wavy div using CSS
.fill-gray {
background-color: gray;
}
.semi-circle {
border-radius: 50%;
width: 150px;
height: 80px;
background-color: green;
position: absolute;
}
.semi-circle-1 {
top: -25px;
left: 0px;
background-color: gray;
}
.semi-circle-2 {
top: -60px;
left: 135px;
background-color: white;
}
.rectangle {
width: 275px;
height: 400px;
position:relative;
top: 100px;
border-top-left-radius: 15px;
}
<div class="fill-gray rectangle">
<div class="fill-gray semi-circle semi-circle-1"></div>
<div class="fill-gray semi-circle semi-circle-2"></div>
</div>
Creating CSS wave shape
You can achieve it using border-radius
, relative positioning
a little CSS gradient
and some z-index
.
HTML
<div class="topdiv">Top Content</div>
<div class="overlapdiv"></div>
<div class="bottomdiv">Bottom Content</div>
CSS
div {
width: 500px;
min-height: 200px;
position: relative;
}
.topdiv {
background-color: #911bc9;
border-radius: 0 0 0 100px;
z-index: 2;
}
.overlapdiv {
top: -100px;
background: linear-gradient(90deg,rgba(168, 57, 224, 1) 0%,rgba(168, 57, 224, 1) 50%,rgba(145, 27, 201, 1) 50%,rgba(145, 27, 201, 1) 100%);
}
.bottomdiv {
background-color: #a839e0;
z-index: 1;
border-radius: 0 100px 0 0;
top: -200px;
}
DEMO
How can I make a full width wave in CSS
If your footer once will become a complex image and it'll be hard to draw it with SVG
and it could be cyclic (several repeated waves instead of only one) - you may create a template image and repeat it as a background. The template below is just an example and it's not ideally glued.
body { margin: 0;}
footer { position: absolute; height: 100px; bottom: 0px; left: 0px; right: 0px; background-repeat: repeat-x; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmAAAABaCAIAAACQd31lAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDFDRjM1Q0M5NTBGMTFFNDlBODdEMzY3RkIwNDAyQjUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDFDRjM1Q0Q5NTBGMTFFNDlBODdEMzY3RkIwNDAyQjUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MUNGMzVDQTk1MEYxMUU0OUE4N0QzNjdGQjA0MDJCNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MUNGMzVDQjk1MEYxMUU0OUE4N0QzNjdGQjA0MDJCNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqFfIEkAABzRSURBVHja7J3ZkhzH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');}
<footer></footer>
CSS Shape Wave Divider with the Body Background SVG Texture
I've changed slightly the shape you have. I'm keeping the curve but I close the shape in the opposite direction. All a stroke to see what I mean.
The shape is filled white leaving the rest of the svg transparent so that you can see the body's background.
body {
background-color: #0b4a34;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0V0zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm20 0a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 37a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm10-17h20v20H20V20zm10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z' fill='%23ffffff' fill-opacity='0.06' fill-rule='evenodd'/%3E%3C/svg%3E");
}
svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 112px;
background:transparent;
}
<section style="position: relative;">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M0,27.35 A600.21,600.21,0,0,0,321.39,56.44
C379.39,45.65,435.545,26.31,493.39,14.58
C575.78,-2.14,661.58,-3.15,743.84,14.19
C823.78,31,906.67,72,985.66,92.83
C1055.71,111.31,1132.19,118.92,1200,95.83V120H0Z" class="shape-fill" fill="white"></path>
</svg>
<div style="margin-top: 0px;background-color: white;height: 300px;">
test
</div>
</section>
Related Topics
How to Prevent Long Words from Breaking My Div
How to Word-Wrap Long Words in a Div
Ipad Safari Scrolling Causes HTML Elements to Disappear and Reappear With a Delay
How to Center ≪Ul≫ ≪Li≫ into a Div
Format Text in a ≪Textarea≫
Does Height and Width Not Apply to Span
Is Float For Layout Bad? What Should Be Used in Its Place
Size of Html5 Canvas Via CSS Versus Element Attributes
How to Apply a CSS Style on Html5 Datalist Options
Show Child Div Within Hidden Parent Div
How to Add a Scrollbar to an Html5 Table
Center a 'Div' Vertically in a % Height 'Div'
Html 5 Strange Img Always Adds 3Px Margin At Bottom
Single Huge .Css File Vs. Multiple Smaller Specific .Css Files