Jonas: Hexagon

Hallo zusammen!

Ich beschäftige mich erst seit ein paar Wochen mit der HTML und CSS Codierung und bin deswegen noch nicht richtig in der Materie. Bei dem folgenden Problem stoße ich an meine Grenzen: Ein Photo liegt über (z-index) einem Hexagon bestehend aus drei Rechtecken. Das gesamte Photo ist sichtbar. Nun soll es so formatiert werden, dass nur noch die Fläche oberhalb des Hexagons für den Benutzer sichtbar ist. Gibt es dafür einen Befehl oder irgendeinen Trick?

Danke im Voraus!

  1. Yo!

    Ein Photo liegt über (z-index) einem Hexagon bestehend aus drei Rechtecken. Das gesamte Photo ist sichtbar. Nun soll es so formatiert werden, dass nur noch die Fläche oberhalb des Hexagons für den Benutzer sichtbar ist. Gibt es dafür einen Befehl oder irgendeinen Trick?

    Dafür musst du entweder eine Grafik, auf der das Hexagon transparent ist, darüber legen (so dass der Rest der Grafik also den Rand „drumherum“ bildet) – oder ein SVG als Filter nutzen.

    MfG ChrisB

    1. Dafür musst du entweder eine Grafik, auf der das Hexagon transparent ist, darüber legen (so dass der Rest der Grafik also den Rand „drumherum“ bildet)

      Buh!

      – oder ein SVG als Filter nutzen.

      Das wäre der bevorzugte Weg. (IE zeigt sich davon noch unbeeindruckt.)

      Ginge aber auch anders.

      LLAP

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. Hallo Gunnar Bittersmann,

        Ginge aber auch anders.

        Es gibt Leute, die machen ganze Zeichensätze mit CSS. http://yusugomori.com/projects/css-sans/fonts

        Zum Testen: http://yusugomori.com/projects/css-sans/archive

        Und irgendwo gabs auch mal die Simpsons rein aus CSS.

        Bis demnächst

        Matthias

        --
        Signaturen sind bloed (Steel)
        1. Hallo

          Und irgendwo gabs auch mal die Simpsons rein aus CSS.

          Nicht irgendwo, sondern bei Chris Pattle auf Github.

          Manchmal lohnt es sich doch, solch Schabernack in die Lesezeichen zu packen. :-)

          Tschö, Auge

          PS: Meine erste CSS-Menschelei. :-)

          --
          Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, “Wachen! Wachen!
          1. Hallo Auge,

            Nicht irgendwo, sondern bei Chris Pattle auf Github.

            Genau, ich hatte es 2014 schon mal im Forum verlinkt.

            PS: Meine erste CSS-Menschelei. :-)

            Cool, ne? Du kennst bestimmt twitter/CSSHumor.

            Bis demnächst
            Matthias

            --
            Signaturen sind bloed (Steel)
            1. Hallo

              PS: Meine erste CSS-Menschelei. :-)

              Cool, ne? Du kennst bestimmt twitter/CSSHumor.

              Da ich Twitter nicht nutze, nicht. Es sind aber ein paar nette Sachen dabei.

              Tschö, Auge

              --
              Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, “Wachen! Wachen!
            2. @@Matthias Apsel

              Cool, ne? Du kennst bestimmt twitter/CSSHumor.

              Und Jed Schmidts großartige Inros zur CSSConf EU: 2013, 2014.

              LLAP

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. Hi there,

        Ginge aber auch anders.

        Sehr schön. Danke für das Aufzeigen dieser Lösung...

      3. Dafür musst du entweder eine Grafik, auf der das Hexagon transparent ist, darüber legen (so dass der Rest der Grafik also den Rand „drumherum“ bildet)

        Buh!

        – oder ein SVG als Filter nutzen.

        Das wäre der bevorzugte Weg. (IE zeigt sich davon noch unbeeindruckt.)

        Ginge aber auch anders.

        LLAP

        Die Fake-Hexagon Variante funktioniert wunderbar! Danke für den Tipp! Wenn ich es dennoch mit einem SVG Filter versuchen wollte, welche Art von Filter brauche ich dafür denn?

        1. Die Fake-Hexagon Variante funktioniert wunderbar! Danke für den Tipp! Wenn ich es dennoch mit einem SVG Filter versuchen wollte, welche Art von Filter brauche ich dafür denn?

          Keinen Filter sondern SVG/clipPath

          Als Form ein Polygon oder Pfad

          LG Matthias

        2. Das wäre der bevorzugte Weg. (IE zeigt sich davon noch unbeeindruckt.) Wenn ich es dennoch mit einem SVG Filter versuchen wollte, welche Art von Filter brauche ich dafür denn?

          Du bist dem Link zu Can I use… gefolgt? Gut. Da steht doch als Überschrift „CSS clip-path property“. Wenn man damit wenig anfangen kann, gibt man das in die Suchmaschine seiner Wahl ein.

          Oben in den SERPs: Chris Coyiers Almanac.

          Wie man aus Can I use… entnehmen kann, braucht man für WebKit/Blink nicht einmal SVG. So sieht’s aus.

          LLAP

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)