Matthias Scharwies: CSS - Ecken mit border?

SELF-Forum

CSS - Ecken mit border?

Matthias Scharwies
– Informationen zu den Bewertungsregeln

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.
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS - Ecken mit border?

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@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
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS - Ecken mit border?

      Matthias Scharwies
      – Informationen zu den Bewertungsregeln

      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.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS - Ecken mit border?

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@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
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. CSS - Ecken mit border?

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@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
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS - Ecken mit border?

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@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
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. CSS - Ecken mit border?

          Matthias Scharwies
          – Informationen zu den Bewertungsregeln

          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.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

    3. CSS - Ecken mit border?

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@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? ↩︎

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. CSS - Ecken mit border?

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    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

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS - Ecken mit border?

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@MudGuard

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

      Oder conic-gradient: Corners 2.

      Kwakoni Yiquan

      --
      Ad astra per aspera
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln