Wie kann ich mit CSS und SVG einen abgerundeten Rahmen mit gebogenen Enden erstellen?

Erstellen eines geschwungenen Rahmens mit abgerundeten Enden mit CSS und SVG

Beim Erstellen einer Website stößt man häufig auf Designdetails, die kreative Lösungen erfordern . Ein solches Detail ist die Erstellung eines runden Rahmens mit gebogenen Enden.

Problem:
Ein Webdesigner hat Schwierigkeiten, mithilfe von CSS einen runden Rahmen mit gebogenen Enden zu erstellen. Sie haben versucht, dies durch abgerundete Ecken zu erreichen, aber es ergibt nicht die gewünschte Form.

Lösung:
Um einen gekrümmten Rand mit abgerundeten Enden zu erstellen, können wir Scalable Vector verwenden Grafiken (SVG) als Hintergrund. SVG ermöglicht die Erstellung benutzerdefinierter Formen und Kurven und bietet so mehr Flexibilität und Kontrolle über das Design.

Um die gewünschte Form zu erreichen, erstellen wir ein benutzerdefiniertes SVG-Element, das einem halbmondförmigen Halbkreis ähnelt. Hier ist ein Beispiel:

<svg xmlns='http://www.w3.org/2000/svg'
  viewBox='10 10 45 15'
  width='64' height='64'
  fill='#29a7e8'>
  <path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' />
</svg>

Diese SVG definiert einen Pfad, der mit einer horizontalen Linie beginnt und dann in eine Abwärtskurve übergeht. Mithilfe von CSS können wir diese SVG-Datei dann als Hintergrund für das Element festlegen, das den geschwungenen Rand haben soll.

Hier ist der aktualisierte CSS-Code:

.circle {
  display: inline-block;
  position: relative;
  top: -28px;
  border-radius: 100%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 45 15'  width='64' height='64' fill='%2329a7e8'><path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' /></svg>") 0 0/100% 100% no-repeat;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}

Durch Kombination der benutzerdefinierten SVG-Form Mit der CSS-Hintergrundeigenschaft können wir einen runden Rahmen mit gebogenen Enden erstellen, der das gewünschte Design nachahmt.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS und SVG einen abgerundeten Rahmen mit gebogenen Enden erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!