Comment créer une forme d'onde CSS3 avec une bordure ?

Forme d'onde CSS3 avec bordure

Dans cette requête, l'utilisateur souhaite créer une forme d'onde avec une bordure en utilisant CSS3. Malgré leurs tentatives d'utilisation des formes CSS3, ils ont rencontré des difficultés.

Pour résoudre ce problème, les formes CSS3 ne sont peut-être pas la solution la plus appropriée, car elles ne sont pas conçues pour créer des bordures. Au lieu de cela, une approche plus efficace consiste à utiliser SVG (Scalable Vector Graphics).

Solution utilisant SVG :

Remplacez l'élément div ".panel" par un élément SVG . Utilisez l'élément "path" pour définir la forme de la vague. Spécifiez l'attribut "fill" pour définir la couleur d'arrière-plan et l'attribut "stroke" pour créer la bordure. Faites flotter l'élément SVG vers la droite pour l'aligner en conséquence.

Voici un exemple de code HTML 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>

Cette approche vous permet de contrôler la couleur de remplissage et la bordure indépendamment, ce qui entraîne la forme de vague souhaitée avec une bordure.

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!