CSS - Ecken mit border?
Matthias Scharwies
- css
Guten Morgen,
wie würdet ihr solche Ecken denn mit CSS realisieren?
Früher hatte ich sowas mal mit je zwei Pseudoelementen für aside
und die h3
gemacht.
Gibt es eine elegantere Lösung? Evtl. auch mit nur zwei gegenüberliegenden Ecken?
Vielen Dank im Voraus für eure Überlegungen und Antworten.
Herzliche Grüße
Matthias Scharwies
@@Matthias Scharwies
wie würdet ihr solche Ecken denn mit CSS realisieren?
Bei der CSS Battle gibt es einen (inzwischen vielleicht auch zwei oder drei), der immer wieder was mit border-image
hinzaubert. Ich könnte mir vorstellen, dass das auch hier der Zaubertrick ist.
Ich werd die Frage mal an Ilya & Co. weiterleiten.
Kwakoni Yiquan
Servus!
@@Matthias Scharwies
wie würdet ihr solche Ecken denn mit CSS realisieren?
Bei der CSS Battle gibt es einen (inzwischen vielleicht auch zwei oder drei), der immer wieder was mit
border-image
hinzaubert. Ich könnte mir vorstellen, dass das auch hier der Zaubertrick ist.Ich werd die Frage mal an Ilya & Co. weiterleiten.
Danke! (Es gab mal nen Artikel von Lea-Verou über das fiktive border-corner-shape
)
Kwakoni Yiquan
Herzliche Grüße
Matthias Scharwies
@@Matthias Scharwies
(Es gab mal nen Artikel von Lea-Verou über das fiktive
border-corner-shape
)
Abgesehen davon, dass ihre Idee nie implementiert wurde (AFAIK), hätte das hier auch nicht geholfen.
Kwakoni Yiquan
@@Gunnar Bittersmann
border-image
Damit geht’s vermutlich einfacher. Was aber auch geht: Einen Rahmen drumrum und die nicht gewünschten Stellen ausschneiden: Corners.
Kwakoni Yiquan
@@Gunnar Bittersmann
Was aber auch geht: Einen Rahmen drumrum und die nicht gewünschten Stellen ausschneiden: Corners.
Die Lösung hat den Charme, dass sie auch mit rounded corners (wah wah) funktioniert: Corners 1.1.
Kwakoni Yiquan
Servus!
@@Gunnar Bittersmann
Was aber auch geht: Einen Rahmen drumrum und die nicht gewünschten Stellen ausschneiden: Corners.
Die Lösung hat den Charme, dass sie auch mit rounded corners (wah wah) funktioniert: Corners 1.1.
Alles sehr cool! Vielen Dank!
Melde mich morgen ausführlicher!
Kwakoni Yiquan
Herzliche Grüße
Matthias Scharwies
@@Gunnar Bittersmann
Bei der CSS Battle gibt es einen (inzwischen vielleicht auch zwei oder drei), der immer wieder was mit
border-image
hinzaubert. Ich könnte mir vorstellen, dass das auch hier der Zaubertrick ist.
Irgendwann muss ich das ja auch mal lernen. Erster Versuch: Corners 3.
Conic-gradients verworfen und @MudGuard’s[1] Idee mit SVG aufgegriffen. Rounded corners, wah wah.
Kwakoni Yiquan
Ich weiß, dass da eigentlich kein Apostroph hinkommt. Aber irgendein Trennzeichen muss da ja hin. U+2060? ↩︎
Hi,
wie würdet ihr solche Ecken denn mit CSS realisieren?
für jede Ecke ein Hintergrundbild (svg mit 2 Linien)
cu,
Andreas a/k/a MudGuard
@@MudGuard
für jede Ecke ein Hintergrundbild (svg mit 2 Linien)
Oder conic-gradient: Corners 2.
Kwakoni Yiquan