Wie erstelle ich eine CSS3-Wellenform mit einem Rand?

CSS3-Wellenform mit Rand

In dieser Abfrage möchte der Benutzer mithilfe von CSS3 eine Wellenform mit einem Rand erstellen. Trotz des Versuchs, CSS3-Formen zu verwenden, stießen sie auf Schwierigkeiten.

Um dieses Problem zu beheben, sind CSS3-Formen möglicherweise nicht die geeignetste Lösung, da sie nicht für die Erstellung von Rändern konzipiert sind. Ein effektiverer Ansatz ist stattdessen die Verwendung von SVG (Scalable Vector Graphics).

Lösung mit SVG:

Ersetzen Sie das „.panel“-Div-Element durch ein SVG-Element . Verwenden Sie das Element „Pfad“, um die Form der Welle zu definieren. Geben Sie das Attribut „Füllung“ an, um die Hintergrundfarbe festzulegen, und das Attribut „Strich“, um den Rahmen zu erstellen. Bewegen Sie das SVG-Element nach rechts, um es entsprechend auszurichten.

Hier ist ein Beispiel für HTML- und CSS-Code:

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

Mit diesem Ansatz können Sie die Füllfarbe und den Rahmen unabhängig voneinander steuern, was zu … die gewünschte Wellenform mit einem Rand.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine CSS3-Wellenform mit einem Rand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!