Linie mit eingerücktem Kreis
Ich würde gerne wissen, wie dieses Herz mit dem eingerückten Kreis um es herum implementiert ist. Wie kann ich die Kurven so machen? Ist das mit CSS, HTML möglich?
Ich weiß, wie man ein Herz mit CSS oder sogar einem Bild implementiert, aber die gekrümmte Grenze ist jenseits meines Wissens.
border-radius scheint in diesem Fall keine Lösung zu sein.
7 Antworten
Hier ist eine Idee, wie Sie dieses Layout mit einer Inline-Svg erreichen können.
Im SVG:
- Der erste Pfad ist die Zeile mit dem eingerückten Kreis. Der eingerückte Kreis wird mit einem Bogenbefehl erstellt
- Das zweite Pfadelement ist der Herzumriss. Es verwendet den Bézier-Kurvenbefehl für den oberen Teil des Herzens.
Weitere Informationen zu den Pfadbefehlen in SVG finden Sie unter MDN
Die beste Lösung für Ihr Problem wäre also die Verwendung einer SVG-Form wie folgt oder einer benutzerdefinierten Schriftart, wie Sie sie ändern können Farbe und sie werden gut für Netzhaut usw. skalieren.
Normalerweise eignet sich CSS3 hervorragend zum Erstellen von einfachen Formen, wenn es jedoch um Konturen geht, fällt die Art um. Dies liegt daran, dass sie normalerweise darauf angewiesen sind, mehrere Formen mithilfe von Vorher- und Nachher-Selektoren zu erstellen. Dies funktioniert normalerweise, aber wenn Sie einen Rahmen anwenden möchten, werden sich überlappende Probleme mit der Form ergeben.
Die einzige echte css-Lösung wäre es, eine zweite Herzform zu erzeugen, die als Maske etwas kleiner ist. Aber das ist alles Markup aufgebläht, so SVG ist wirklich Ihre beste Option.
Ein schnelles und schmutziges Beispiel für ein sich überschneidendes Herz ist hier Ссылка
Die einfachste, sicherste und browserübergreifende Lösung ist die Verwendung eines Image.
Die anderen Möglichkeiten: Leinwand, Umrandungsradius, Transform oder SVG.
Wenn Sie wirklich mit css machen möchten, können Sie einige Webservices von Bild zu CSS ausprobieren (wie ) Ссылка - nur der erste, der in Google erscheint)
Obwohl der einfachste und sauberste Weg ist, es mit einem transparenten Bild zu machen.
Wie bei der Implementierung eines Bogens in CSS3 kann diese Antwort hilfreich sein: Vorgehensweise mache Bogenformen mit CSS3?
CSS = border-radius + overflow:hidden;
-
Platziere den Kreis als Pseudoelement im Block mit
overflow:hidden;. So bekommen wir einen Bogen. -
Nimm das Herz aus dem Font Awesome . Um das Symbol über das CSS festzulegen, erstellen Sie einen weiteren Block mit einem Pseudoelement. Wenn das Herz nicht über die untere Grenze des Bogens hinausragt, wäre es nicht von
overflow:hidden;bedroht und wir würden beide Pseudo-Elemente in einem Block platzieren. -
Positionieren Sie den zusammengebauten Block oben auf dem Bild mit dem unteren orangefarbenen Rand. Legen Sie die negative Eigenschaft
bottomfest, um den Block auf die Tiefe des Rahmens zu reduzieren.
Mit der Eigenschaft border-radius können Sie runde Formen mit CSS erreichen:
BEARBEITEN
Entschuldigung, habe diese Frage vorzeitig beantwortet. Falls Sie dies nicht mit einem Bild lösen wollen, könnte ich mir eine Lösung vorstellen.
Der untere orange Rand könnte ein <div> mit einer Höhe von 1px oder 2px und eine Breite von 100% sein. Das Herzelement könnte ein anderes div sein, wie ich es oben erklärt habe. Als nächstes müssten Sie nur ein höheres z-index (zusammen mit position: relative ) auf das Herz anwenden, als das <div> . Und Sie müssten einige negative margin-top auf die <div> anwenden, bis sie sich überlappen.
Nur eine Idee, vielleicht bringt es dich irgendwohin.
Tags und Links css svg css3 css-shapes