Comment créer une forme de vague avec une bordure en utilisant CSS3 et SVG ?

Forme d'onde avec bordure utilisant CSS3 et SVG

Implémenter une forme d'onde avec CSS3 peut être un défi. Bien que les formes CSS3 offrent une large gamme de nuances, elles ne parviennent pas à appliquer des bordures et à définir des couleurs d'arrière-plan sur des formes irrégulières.

Pour obtenir l'effet souhaité de « forme de vague avec bordure », nous pouvons exploiter la puissance de SVG (graphiques vectoriels évolutifs). Les SVG offrent une flexibilité dans la définition de formes complexes et peuvent facilement être stylisés avec CSS.

<svg class="panel" width="200" height="54">
  <path d="M0,0 h7 q9,3 12.5,10 l13,30 q3.2,10 13,10 h157 v-50z" fill="white" />
  <path transform="translate(0, -0.5)" d="M0,2 h7 q10,2 13,10 l13,30 q3,9 13,10 h157" fill="none" stroke="#B4CAD8" stroke-width="4" />
  <text x="110.5" y="25" text-anchor="middle">This is a panel</text>
</svg>

Placer l'élément SVG à côté du contenu principal et l'aligner à droite donne l'illusion d'une forme de vague avec une bordure :

.panel {
  position: relative;
  float: right;
  margin-top: -4px;
}

En définissant le z-index du conteneur div sur -1, nous nous assurons que l'élément SVG reste au-dessus du contenu et crée l'effet souhaité.

Ainsi, en combinant les flexibilité des SVG avec les capacités de style de CSS, nous pouvons obtenir l'effet "forme d'onde avec bordure" en CSS3.

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!