Maison > interface Web > tutoriel CSS > Comment créer une forme de vague avec une bordure en utilisant SVG et CSS ?

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

Patricia Arquette
Libérer: 2024-11-27 08:44:13
original
988 Les gens l'ont consulté

How to create a wave shape with a border using SVG and 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>
Copier après la connexion
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;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal