Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich mit CSS und SVG einen Kreis mit gebogenem Ende?

Wie erstelle ich mit CSS und SVG einen Kreis mit gebogenem Ende?

Patricia Arquette
Freigeben: 2024-12-01 22:11:11
Original
249 Leute haben es durchsucht

How to Create a Circle with a Curved End Using CSS and SVG?

CSS mit gebogenem Rand: Erzielen Sie einen Kreis mit gebogenem Ende

Bei der Anpassung der Website-Ästhetik besteht eine häufige Herausforderung darin, komplexe Formen und Ränder zu erstellen. Eine konkrete Anfrage besteht darin, einen Rand zu erstellen, der einen Kreis mit einem gebogenen Ende bildet.

Um dieses Problem anzugehen, prüfen wir eine Lösung, bei der SVG als Hintergrund für das Randelement verwendet wird. SVG (Scalable Vector Graphics) ermöglicht die Erstellung komplizierter Formen und Verläufe, die leicht skalierbar und auf verschiedene Geräte übertragbar sind.

Hier ist eine Aufschlüsselung der überarbeiteten Version Code:

CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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

}

Nach dem Login kopieren

HTML:

1

<div>

Nach dem Login kopieren

Erklärung:

  1. Wir fügen ein SVG als Hintergrundbild des .circle-Elements hinzu. Die SVG-Form definiert das gekrümmte Ende des Kreises.
  2. Wir positionieren die .circle-Elemente leicht über der unteren Leiste, um die Illusion einer kontinuierlichen Kurve zu erzeugen.
  3. Die SVG-Form wird außerhalb des Hauptteils platziert Inhalte für eine bessere Organisation.

Mit diesem aktualisierten Code können wir das gewünschte Ergebnis erzielen, indem wir einen runden Rand mit einem gebogenen Ende bereitstellen, der dem Beispiel im Original ähnelt Frage.

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage