Comment créer une forme ondulée réactive à l'aide de SVG et CSS ?

Utiliser SVG et CSS pour créer une forme ondulée

Question : Comment puis-je créer une forme ondulée en utilisant CSS, similaire à l'image fournie ?

Réponse :

Le souhaité une forme ondulée peut être obtenue grâce à une combinaison de SVG et CSS. Voici une approche globale :

Tout d'abord, créez un élément SVG et définissez le chemin de la vague. Ce chemin contrôle les courbes et les contours de la forme. Dans l'exemple ci-dessous, le chemin forme une vague du point (0, 100) au point (500, 100) :

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

Ensuite, créez un élément conteneur pour contenir le SVG. Ce conteneur garantira que la forme de la vague reste réactive.

<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">

Enfin, stylisez le conteneur à l'aide de CSS pour le rendre réactif et positionnez le SVG. En définissant le fond de remplissage du conteneur à 100 % et la position relative, vous pouvez préserver les proportions du SVG tout en remplissant la hauteur disponible du conteneur :

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

Cette approche garantit que la forme d'onde SVG est réactive. , conservant sa forme souhaitée quelles que soient les dimensions du conteneur.

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!