Comment puis-je créer une forme ondulée en utilisant CSS ?

Création de formes ondulées avec CSS

Question :

Comment puis-je créer une forme ondulée vous aimez cette image en utilisant CSS ?

[Image d'un ondulé Forme]

Tentative initiale :

Ce CSS crée une ligne droite :

#wave {
  position: absolute;
  height: 70px;
  width: 600px;
  background: #e0efe3;
}

Réponse :

Pour obtenir une forme ondulée, nous pouvons exploiter les chemins SVG. En combinant un conteneur aux propriétés responsives et un SVG avec un chemin courbe, nous pouvons créer l'effet souhaité :

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
.container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}

<div class="container">
  <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z">

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!