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

Création d'une forme de vague avec bordure en CSS3

Lorsque vous essayez de concevoir une forme de vague avec CSS3 à l'aide de Shapes, le résultat souhaité peut ne pas être réalisable en raison des limitations des paramètres de couleur de bordure et d’arrière-plan. Pour surmonter ce problème, envisagez d'utiliser SVG au lieu d'un div pour la forme d'onde.

Mise en œuvre :

Commencez par créer un conteneur div avec une bordure inférieure. Dans le conteneur, placez le contenu et le SVG pour la forme d'onde. Faites flotter le SVG vers la droite.

Conception SVG :

Créez la forme de la vague en utilisant des chemins pour définir la forme et remplissez-la de blanc. Ensuite, créez un autre chemin, légèrement décalé, pour définir la bordure à l'aide de la propriété Stroke et en définissant le remplissage sur transparent.

Exécution finale :

Le SVG chevauchera le légèrement le récipient, créant l'illusion d'une forme de vague bordée. Ajustez les dimensions et la position du SVG selon vos besoins pour correspondre au design souhaité.

Exemple de code :

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

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

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!