web-dev-qa-db-fra.com

Vagues en CSS ou SVG

J'essaie de créer des ondes douces avec [~ # ~] css [~ # ~] et j'ai des problèmes. J'utilise border-radius en ce moment pour créer des vagues mais cela ressemble plus à des nuages. J'ai essayé d'utiliser transform: translateZ(180deg); mais la couleur div est alors à l'envers.

Voici ce que je veux: Waves in CSS or SVG

Voici ce que j'ai: Waves made with CSS

.wave1 {
  left: 0%;
  margin-left: -50px;
}

.wave2 {
  margin-left: -69px;
}

.wave3 {
  margin-left: -69px;
}

.wave4 {
  margin-left: -69px;
}

.waves {
  width: 200%;
  clear: none;
  z-index: 100;
  position: absolute;
  margin-top: 200px;
  margin-left: -150px;
}

.waves div {
  float: left;
  width: 500px;
  height: 100px;
  border: solid 5px #000;
  border-color: transparent;
  border-radius: 70%/100px 100px 0 0;
  background-color: #fff;
}

.bottom-half {
  width: 100%;
  height: 50%;
  top: 70%;
  position: absolute;
  background-color: #fff;
}

.background-waves {
  width: 200%;
  clear: none;
  z-index: 50;
  position: absolute;
  margin-top: 190px;
  margin-left: 75px;
}

.bwave1 {
  left: 0%;
  margin-left: -50px;
}

.bwave2 {
  margin-left: -69px;
}

.bwave3 {
  margin-left: -69px;
}

.bwave4 {
  margin-left: -69px;
}

.background-waves div {
  float: left;
  width: 500px;
  height: 100px;
  border: solid 5px #000;
  border-color: transparent;
  border-radius: 70%/100px 100px 0 0;
  background-color: #fff;
  opacity: 0.5;
}
<div class="waves">
  <div class="wave1"></div>
  <div class="wave2"></div>
  <div class="wave3"></div>
  <div class="wave4"></div>
  <div class="wave5"></div>
</div>
<div class="background-waves">
  <div class="bwave1"></div>
  <div class="bwave2"></div>
  <div class="bwave3"></div>
  <div class="bwave4"></div>
  <div class="bwave5"></div>
</div>
csscss3svgcss-shapes
9
TheFlyingProgrammer

Je suggère d'utiliser un code en ligne [~ # ~] svg [~ # ~]. Vos formes sont assez simples et font les vagues avec le svg [~ # ~] [~ # ~]<path> l'élément est facile.
Tout ce que vous devez savoir sur le chemin [~ # ~] svg [~ # ~] sur MDN . Dans l'exemple suivant, j'ai utilisé deux éléments de chemin avec courbes de Bézier quadratiques pour faire les vagues:

svg {
  background: url('https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg') no-repeat center center;
  background-size: cover;
  width: 100%;
  display: block;
}
<svg viewbox="0 0 100 25">
  <path fill="#9EAFFD" opacity="0.5" d="M0 30 V15 Q30 3 60 15 V30z" />
  <path fill="#9EAFFD" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" />
</svg>
18
web-tiki