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

Forme ondulée avec CSS

La création d'une forme ondulée avec CSS peut être réalisée en utilisant une combinaison de propriétés CSS3 et SVG. Voici comment procéder :

1. Créer un conteneur

Insérez l'élément SVG dans un conteneur div pour contrôler la taille de la forme et conserver ses proportions. Ajoutez le CSS suivant :

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

2. Ajoutez l'élément SVG

À l'intérieur du conteneur, insérez un élément SVG avec une propriété viewBox et conserveAspectRatio pour établir les dimensions de la forme et conserver sa forme.

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

La définition du chemin utilise courbes de Bézier cubiques pour créer la forme ondulée. Les propriétés de trait et de remplissage contrôlent respectivement le contour et la couleur de la forme.

3. Positionner le SVG

Définissez l'élément SVG pour qu'il soit positionné de manière absolue dans le conteneur.

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

En ajustant les dimensions et les valeurs du conteneur et des éléments SVG, vous pouvez personnaliser le taille et forme de l'élément ondulé comme vous le souhaitez.

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!