Creating CSS wave shape [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

Want to improve this question? Guide the asker to update the question so it focuses on a single, specific problem. Narrowing the question will help others answer the question concisely. You may edit the question if you feel you can improve it yourself. If edited, the question will be reviewed and might be reopened.

Closed 4 years ago.

Improve this question

Sample image

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
– Jon P, Commented Feb 14, 2021 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
– James in code, Commented Feb 14, 2021 at 21:30

Mohd Abdul Mujib · Accepted Answer · 2021-02-14 21:41:13Z

2

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

answered Feb 14, 2021 at 21:41

Mohd Abdul Mujib

14.2k8 gold badges73 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James in code Over a year ago

I wanted it to fit screen, so i added some java-script to control responsiveness, it worked. thanks.

Mohd Abdul Mujib Over a year ago

Awesome!, you could make it fit using just width:100%; for all the divs.

Collectives™ on Stack Overflow

Creating CSS wave shape [closed]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related