CODEWITHSUNDEEP
csssvg
Rasoul
Rasoul

Reputation: 97

how to create Wave shape with css

I'm trying to recreate this image with svg:

enter image description here

Here is fiddle:http://jsfiddle.net/g7kgdo8u/

But I need this image with css.
Is it possible?

Upvotes: 1

Views: 4626

Answers (2)

Temani Afif
Temani Afif

Reputation: 274384

You can also do it with a radial-gradient:

.box {
  width:300px;
  height:100px;
  background:
  radial-gradient(circle at 50% -300%,blue 90%,transparent 90.5%),
  radial-gradient(circle at 60% -300%,grey 90%,transparent 90.5%);
}
<div class="box"></div>

Upvotes: 2

Sandwell
Sandwell

Reputation: 1457

You can use border-bottom-left-radius and border-bottom-right-radius

div {  
  background-color: lightgrey;
  height: 55px;
  width: 300px;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 50%;
}

div:after {
  content:"";
  display: block;
  background-color: cornflowerblue;
  height: 50px;
  width: 300px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
<div></div>

Upvotes: 3

Related Questions