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

Créer des formes de vagues avec des bordures en CSS3

Concevoir des formes de vagues avec des bordures en CSS3 peut être un défi. Les implémenter à l’aide de formes CSS3 peut ne pas donner les résultats souhaités. Au lieu de cela, une combinaison de positionnement SVG et CSS peut obtenir l'effet souhaité.

Utiliser SVG pour la forme d'onde

Au lieu d'utiliser un élément div pour la forme d'onde, un élément SVG peut être utilisé. L'élément path dans le SVG peut être utilisé pour définir la forme de l'onde. L'attribut fill peut être défini sur blanc pour donner à la forme de vague une couleur unie.

Ajout d'une bordure à la forme de vague

Pour créer la bordure, un autre élément de chemin peut être ajouté au SVG. Ce chemin doit avoir la même forme que la forme de la vague, mais il doit être légèrement plus petit. L'attribut fill doit être défini sur none et les attributs Stroke et Stroke-width doivent être utilisés pour définir la bordure.

Positionnement de la forme d'onde

L'élément SVG peut être positionné en utilisant CSS. La propriété float peut être utilisée pour faire flotter le SVG à droite du contenu. La propriété margin-top peut être utilisée pour positionner le SVG légèrement au-dessus du contenu.

Code final

Le code suivant démontre l'implémentation d'une forme d'onde avec une bordure en utilisant SVG et CSS :

<div class="container">
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nam fuga eligendi ipsum sed ducimus quia adipisci unde atque enim quasi quidem perspiciatis totam soluta tempora hic voluptatem optio perferendis.</p>
  </div>
</div>
<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>

body {
  background: #007FC1;
}
.container {
  border-bottom: 4px solid #B4CAD8;
}
.container {
  background-color: #fff;
  z-index: -1;
}
.container > .text {
  padding: 0.5em;
}
.panel {
  position: relative;
  float: right;
  margin-top: -4px;
}

Cette approche utilise SVG pour créer une forme d'onde personnalisée, puis superpose une bordure par-dessus à l'aide d'un élément de chemin supplémentaire. Le positionnement de la forme d'onde à l'aide de CSS complète le résultat souhaité.

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!