Top wavy div using CSS [duplicate]

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
– void, Commented Jul 27, 2020 at 4:16
there is an example. Should I throw it off in the comments, or in the solution of the issue? — s.kuznetsov
– s.kuznetsov, Commented Jul 27, 2020 at 4:22
If it is a link share it in the comments or else post in a answer... — void
– void, Commented Jul 27, 2020 at 4: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
– s.kuznetsov, Commented Jul 27, 2020 at 9:03

Hitesh Tripathi · Accepted Answer · 2020-07-27 07:14:05Z

3

.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

edited Jul 27, 2020 at 7:14

Hitesh Tripathi

8542 gold badges12 silver badges25 bronze badges

answered Jul 27, 2020 at 4:46

labFareb

715 bronze badges

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

Collectives™ on Stack Overflow

Top wavy div using CSS [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related