Curves / Waves in CSS

Question

Curves / Waves in CSS

Navigation

#1 by (2 votes)
#2 by (0 votes)

5

Is it possible to do in pure css or with some other technique these undulating effects (attached image)? I do not want to use images to make them.

css webdesign

asked by anonymous 23.07.2015 / 19:53

2 answers

File upload callback with Multer - NodeJS Add new element to array

score 2 · Answer 1

Fiddle

Font

css

#wave {
  position: relative;
  height: 70px;
  width: 600px;
  background: #e0efe3;
}
#wave:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 340px;
  height: 80px;
  background-color: white;
  right: -5px;
  top: 40px;
}
#wave:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 300px;
  height: 70px;
  background-color: #e0efe3;
  left: 0;
  top: 27px;
}

<div id="wave"></div>

score 0 · Answer 2

A question, would you like to work with div , img elements with a ripple effect?

Or just a line with ripple effect? You can do this with the element <hr>

Selector :after , inserts a content before the specified element;

Selector :before , inserts a content inside the specified element;

To make it look more like I'm riding this "wavy" line:

Itakeadvantageofthediagonalsofcontentcreatedbeforeandafterthehrelementtotrytocreatearippleeffectthatisnotperfectbutreasonable.

.wave {
  border:0px;
  position: relative;
  height: 70px;
  width: 100%;
  background: white;
}

.wave:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  border-style: groove hidden hidden hidden;
  border-color: #ff0000;
  width: 57%;
  height: 80px;
  background-color: white;
  right: 0px;
  top: 40px;
}

.wave:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  border-style: hidden hidden groove hidden;
  border-color: #ff0000;
  width: 50%;
  height: 70px;
  background-color: white;
  left: 0;
  top: 27px;
}

<hr class="wave" />