Creating CSS wave shape

Question

I would like to archive this kind of shape using CSS.

#wave {
  position: absolute;
  height: 50%;
  width: inherit;
  background: #e0efe3;
}

<div id="wave"></div>

Please provide some more representative html and css. Make it as easy a possible for us to help you by proving a reasonable attempt — Jon P, Feb 14 '21 at 21:27
What i wanted is my page to have two waves like those in the picture filled the whole page, I can do the fill but the shape is my problem — James in code, Feb 14 '21 at 21:30
Have you looked at all at anything? Like SVGs or gradients or border radius or... — A Haworth, Feb 14 '21 at 21:41
Does this answer your question? [Wavy shape with css](https://stackoverflow.com/questions/17202548/wavy-shape-with-css) — symlink, Feb 14 '21 at 21:49
@AHaworth not that good in SVG's that's why i opt for css... the goodness with Mohd Abdul Mujib answer it worked.. thanks for your effort. — James in code, Feb 14 '21 at 21:58

score 2 · Accepted Answer · answered Feb 14 '21 at 21:41

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

I wanted it to fit screen, so i added some java-script to control responsiveness, it worked. thanks. — James in code, Feb 14 '21 at 21:56
Awesome!, you could make it fit using just `width:100%;` for all the divs. — Mohd Abdul Mujib, Feb 14 '21 at 21:57

Creating CSS wave shape

1 Answers1