Création d'une forme d'onde avec la bordure en CSS3

Lorsque vous essayez de concevoir une forme d'onde avec CSS3 à l'aide de formes, le résultat souhaité peut ne pas être réalisable en raison des limites des limites des couleurs de bord et d'arrière-plan. Pour surmonter cela, envisagez d'utiliser SVG au lieu d'une div pour la forme de l'onde.

implémentation:

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

svg Design:

élabore la forme d'onde à l'aide de chemins pour définir la forme et la remplir de blanc. Ensuite, créez un autre chemin, légèrement décalé, pour définir la bordure à l'aide de la propriété de course et définir le remplissage sur transparent.

EXÉCUTION FINAL:

Le SVG chevauchera légèrement le conteneur, créant l'illusion d'une forme d'onde bordée. Ajustez les dimensions et la position du SVG au besoin pour correspondre à la conception souhaitée.

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

  

    
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.