CODEWITHSUNDEEP
csscss-shapes
Maarten
Maarten

Reputation: 229

Create css wave form

I have been looking for a while to figure out how to recreate the below image forms in css but no source that leads me to a win.

The below image show what I'm trying to achieve style 1

Upvotes: 1

Views: 1222

Answers (3)

Max Payne
Max Payne

Reputation: 2438

Stewertside has already shown the most apt. option, i.e. SVG, besides using an image.

Another option is radial gradients which victor and stewertside have shown.

Yet another option is box-shadow, which allows to create any no. of shadows, and also allows for their positioning.

An example using box-shadow and overflow hidden:

div {
  height: 100px;
  width: 600px;
  position: relative;
  overflow: hidden;
}
div:before {
  position: absolute;
  content: "";
  height: 200px;
  width: 820px;
  border-radius: 50%;
  left: -200px;
  top: 8px;
  box-shadow: 70px 70px 0px 70px #8BC74A, 35px 68px 0px 100px #96292D, 0 0 0 120px #700810;
}
<div>
</div>

Upvotes: 2

Stewartside
Stewartside

Reputation: 20935

CSS Gradients

This is possible with CSS gradients but I would really recommend using an SVG alternative as the lines in CSS will be jagged

div {
  border: 2px solid black;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 55%, rgba(38, 155, 3, 1) 50%, rgba(38, 155, 3, 1) 56%, rgba(38, 155, 3, 1) 57%, rgba(38, 155, 3, 1) 58%, rgba(169, 3, 41, 1) 60%, rgba(169, 3, 41, 1) 67%, rgba(169, 3, 41, 1) 68%, rgba(109, 0, 25, 1) 69%, rgba(109, 0, 25, 1) 100%);
  background-position: -325px -5px;
  background-size: 700px 300px;
  width: 200px;
  height: 200px;
<div></div>

SVG

This is pretty close to what you are looking to achieve and with a little more co-ordinate moving it should be what you're looking for.

SVG is well supported and once you understand the methods and co-ordinate structure you can get things looking perfect and also have them be fully responsive.

<svg width="100%" preserveAspectRation="none" viewbox="0 0 400 200">
  <path d="M0,5 Q400,40 400,90 L400,0z" fill="#8BC74A"></path>
  <path d="M0,10 Q400,20 400,80 L400,0 L0,0z" fill="#96292D"></path>
  <path d="M0,0 Q400,0 400,40 L400,0z" fill="#700810"></path>
</svg>

Upvotes: 4

Victor
Victor

Reputation: 9269

Look into overlying several elliptical gradients as background images:

background-image: radial-gradient(...),
                  radial-gradient(...),
                  radial-gradient(...);

Upvotes: 0

Related Questions