Wie erstelle ich mit CSS3 und SVG eine Wellenform mit Rand?

Erstellen einer Wellenform mit Rand in CSS3

Beim Versuch, eine Wellenform mit CSS3 mithilfe von Formen zu entwerfen, wird möglicherweise nicht das gewünschte Ergebnis erzielt erreichbar aufgrund der Einschränkungen der Rahmen- und Hintergrundfarbeinstellungen. Um dies zu umgehen, sollten Sie SVG anstelle eines Div für die Wellenform verwenden.

Implementierung:

Beginnen Sie mit der Erstellung eines Container-Div mit einem unteren Rand. Platzieren Sie im Container den Inhalt und die SVG-Datei für die Wellenform. Bewegen Sie die SVG-Datei nach rechts.

SVG-Design:

Erstellen Sie die Wellenform mithilfe von Pfaden, um die Form zu definieren, und füllen Sie sie mit Weiß. Erstellen Sie als Nächstes einen weiteren, leicht versetzten Pfad, um den Rand mithilfe der Stricheigenschaft zu definieren und die Füllung auf transparent zu setzen.

Endgültige Ausführung:

Die SVG-Datei überlappt die Behälter leicht, wodurch die Illusion einer umrandeten Wellenform entsteht. Passen Sie die Abmessungen und die Position des SVG nach Bedarf an, um es an das gewünschte Design anzupassen.

Beispielcode:

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>

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