Matthias Scharwies: CSS - Ecken mit border?

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

--
Die Signatur findet sich auf der Rückseite des Beitrags.
  1. @@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

    --
    Ad astra per aspera
    1. 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

      --
      Die Signatur findet sich auf der Rückseite des Beitrags.
      1. @@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

        --
        Ad astra per aspera
    2. @@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

      --
      Ad astra per aspera
      1. @@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

        --
        Ad astra per aspera
        1. 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

          --
          Die Signatur findet sich auf der Rückseite des Beitrags.
    3. @@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

      --
      Ad astra per aspera

      1. Ich weiß, dass da eigentlich kein Apostroph hinkommt. Aber irgendein Trennzeichen muss da ja hin. U+2060? ↩︎

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

    1. @@MudGuard

      für jede Ecke ein Hintergrundbild (svg mit 2 Linien)

      Oder conic-gradient: Corners 2.

      Kwakoni Yiquan

      --
      Ad astra per aspera