Top wavy div using CSS

Question

I was trying to create a div like this:

I came up with a solution using SVGs, which is

div {
  width: 100px;
}

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="450 0 50 150">
          <path id = "zone1" d="M450,150 v-50 q12.5 -10, 25, 0 t25 0 v50 z" fill="gray"></path>
  </svg>
</div>

But is there any way to do this by just using CSS?

Nothing against SVG, just figuring out if it is even possible or not. Got any ideas? — void, Jul 27 '20 at 04:16
there is an example. Should I throw it off in the comments, or in the solution of the issue? — s.kuznetsov, Jul 27 '20 at 04:22
If it is a link share it in the comments or else post in a answer... — void, Jul 27 '20 at 04:23
Blocked my answer, pointing out that it is copy-paste. Yes, it's copy-paste! This is not my decision. I made it known at the very beginning! — s.kuznetsov, Jul 27 '20 at 09:03
@sergeykuznetsov it's called plagiarism and this is not allowed here. Continue and you may get banned: https://stackoverflow.com/help/referencing — Temani Afif, Jul 27 '20 at 09:16

score 3 · Accepted Answer · edited Jul 27 '20 at 07:14

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

Here's a repl.it I made for a solution using positioning in CSS: Make a wave with CSS

Or if you so desire, you could use clip-path like in these solutions: Wavy shape with css

Top wavy div using CSS

1 Answers1