Wie erstelle ich mit CSS und SVG einen abgerundeten Rand mit gebogenem Ende?

Gebogener Rand in CSS: Erstellen eines Kreises mit gebogenem Ende

Sie stehen vor der Herausforderung, in CSS einen abgerundeten Rand mit gebogenem Ende zu erstellen. Lassen Sie uns in eine Lösung eintauchen, die diesem Bedarf gerecht wird.

Der Schlüssel zum Erreichen des gewünschten Effekts liegt in der Verwendung von SVG (Scalable Vector Graphics) als Hintergrund für Ihren Rahmen. Mit dieser Technik können Sie ganz einfach komplexe Formen mit sanft geschwungenen Kanten erstellen.

So können Sie die Lösung implementieren:

.bottom-bar {
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
}

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

Im obigen Code verwendet die .circle-Klasse die Hintergrundeigenschaft, um einen SVG-Daten-URI anzugeben. Dieser URI verweist auf ein SVG-Bild, das eine gekrümmte Form definiert, die dann als Hintergrund des Elements verwendet wird. Das viewBox-Attribut des SVG legt die Größe und Position der Form im SVG-Raum fest, und das Pfadelement definiert die gekrümmte Form selbst.

Durch Anpassen der Werte in der Pfaddefinition können Sie die Krümmung und Größe steuern die Form. Sie können auch das Füllattribut ändern, um unterschiedliche Farben auf den Rand anzuwenden.

Diese Technik bietet eine flexible und skalierbare Möglichkeit, geschwungene Ränder in CSS zu erstellen, sodass Sie optisch ansprechende und dynamische Effekte in Ihren Webdesigns erzielen können.

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