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

Wellenformen mit Rändern in CSS3 erstellen

Wellenformen mit Rändern in CSS3 zu entwerfen kann eine Herausforderung sein. Die Implementierung mithilfe von CSS3-Formen führt möglicherweise nicht zu den gewünschten Ergebnissen. Stattdessen kann eine Kombination aus SVG- und CSS-Positionierung den gewünschten Effekt erzielen.

SVG für die Wellenform verwenden

Anstatt ein div-Element für die Wellenform zu verwenden, Es kann ein SVG-Element verwendet werden. Das Pfadelement innerhalb der SVG kann verwendet werden, um die Form der Welle zu definieren. Das Füllattribut kann auf Weiß gesetzt werden, um der Wellenform eine einfarbige Farbe zu verleihen.

Hinzufügen eines Rahmens zur Wellenform

Um den Rahmen zu erstellen, wird ein weiteres Pfadelement benötigt kann dem SVG hinzugefügt werden. Dieser Pfad sollte die gleiche Form wie die Wellenform haben, jedoch etwas kleiner sein. Das Füllattribut sollte auf „Keine“ gesetzt sein und die Attribute „Strich“ und „Strichbreite“ sollten zum Definieren des Rahmens verwendet werden.

Positionierung der Wellenform

Das SVG-Element kann per CSS positioniert werden. Die Eigenschaft float kann verwendet werden, um die SVG-Datei rechts vom Inhalt schweben zu lassen. Die Eigenschaft „margin-top“ kann verwendet werden, um das SVG leicht über dem Inhalt zu positionieren.

Endgültiger Code

Der folgende Code demonstriert die Implementierung einer Wellenform mit einem Rand unter Verwendung von SVG und 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>

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

Dieser Ansatz verwendet SVG, um eine benutzerdefinierte Wellenform zu erstellen und dann mithilfe eines zusätzlichen Pfadelements einen Rahmen darüber zu legen. Die Positionierung der Wellenform mithilfe von CSS vervollständigt das gewünschte Ergebnis.

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