Einführung

Wenn Sie bis vor ein paar Jahren Hintergrundformen oder Abschnitte einer Website wollten, die alles andere als Rechtecke waren, brauchten Sie höchstwahrscheinlich einen Designer, der Ihnen ein statisches PNG- oder JPEG-Bild zur Verfügung stellte, das nach Bedarf hinzugefügt wurde, aber CSS schon Ich habe seitdem einen langen Weg zurückgelegt, meine Freunde.

Als ich an einem Website-Update arbeitete, das den Inhalt der Seite in verschiedenfarbige Hintergrundabschnitte aufteilte, die zwischen reinem Weiß und sanften Grautönen wechselten, hatte ich in das Designmodell einen Abschnitt eingefügt, dessen Unterkante nach oben und unten geneigt war rechts, anstatt in einem perfekten 90-Grad-Winkel über die Seite zu gehen, wie es bei einem typischen Blockelement der Fall ist.

Jetzt hätte ich den Designer bitten können, ein Hintergrundbild zu erstellen, um dies für mich zu tun, aber stattdessen wollte ich sehen, ob ich es mit der Leistungsfähigkeit von CSS selbst schaffen könnte. Und siehe da, mit CSS Clip-Path könnte ich es schaffen.

Interessante Formen und Grafiken im DOM sind nicht mehr nur die Domäne von Designern, mit Tools wie CSS Clip-Path haben Entwickler die Möglichkeit, Elemente umzuformen, und ich zeige Ihnen, wie.

CSS-Clip-Pfad

Wenn Sie wie ich mit der Eigenschaft CSS-Clip-Pfad weniger vertraut sind: Sie erstellt einen Ausschneidebereich, der festlegt, welche Teile eines Elements angezeigt werden sollen. Teile, die innerhalb der Region liegen, werden angezeigt, während Teile außerhalb ausgeblendet werden.

Eine Demo aus den MDN-Clip-Pfad-Dokumenten. Verschiedene Clip-Pfad-Optionen bieten unterschiedliche Ansichten des Heißluftballons und des Textes.

Die Clip-Pfad-Eigenschaft kann eine Vielzahl von Werten annehmen:

• , das Werte wie URL für ein SVG-Element mit definiertem Beschneidungspfad akzeptiert.
• , das Werte wie margin-box und border-box akzeptiert.
• , das Werte wie „circle()“ und „rect()“ akzeptiert.
• globale Werte, die Werte wie inherit und revert akzeptieren.

Die Werte und können sogar in einem Clip-Pfad kombiniert werden.

/* this CSS combines two different clip path properties */
clip-path: padding-box circle(50px at 0 100px);

In diesem Beitrag wird nicht ausführlich auf alle Eigenschaften eingegangen, die Clip-Path akzeptieren kann, und darauf, wie sie kombiniert werden können, um recht komplexe Formen zu erstellen. Wenn Sie weitere Informationen und Beispiele zu clip=path in Aktion wünschen, empfehle ich, mit der Mozilla-Dokumentation zu beginnen.

Eine der -Eigenschaften, die Clip-Path akzeptiert, ist polygon(), und das war letztendlich die Lösung, die ich für meinen geneigten Hintergrundabschnitt brauchte.

Das Polygon, das ich mit CSS neu erstellen musste

Der graue Polygonhintergrund, den ich mit CSS erstellen musste.

Das Bild oben ist ein Screenshot des Abschnitts mit grauem Hintergrund, den ich mit der Eigenschaft polygon() des CSS-Clip-Paths neu erstellen musste. Und als erstes musste ich einige HTML-Elemente erstellen, auf die ich das CSS anwenden konnte.

polygon() Clip-Pfad vs. rect() Clip-Pfad

Sie fragen sich vielleicht, warum ich mich für die Verwendung der Eigenschaft „polygon()“ anstelle der Eigenschaft „rect()“ mit Clip-Pfad entschieden habe. Obwohl die beiden ähnlich sind, kann polygon() komplexere Polygonformen erstellen und bietet eine größere Vielseitigkeit für fortgeschrittene Designs, indem es Koordinatenpaare akzeptiert, um jeden Scheitelpunkt des Polygons zu definieren, während rect() nur rechteckige Formen verarbeiten kann.

Richten Sie HTML und CSS ein

Die Site, an der ich gearbeitet habe, basierte auf dem statischen Site-Generator Hugo, einem Go-basierten Framework. Hugo verwendet Vorlagen, um den HTML-Code der Website darzustellen. Wenn Sie sich mit HTML auskennen, dürfte Ihnen der folgende Beispielcode daher relativ bekannt vorkommen.

Ein Hinweis zu Vorlagen:

Wenn Sie jemals JSX-Komponenten, Node.js mit Pug oder Handlers oder Jekyll verwendet haben – Hugos Vorlagen sind ähnlich: HTML-Elemente mit Go-Variablen und Funktionen, eingestreut mit {{ }}, um überall in den Vorlagen die richtigen Informationen darzustellen werden injiziert.

Hier ist der Code für den „Rätselabschnitt“ der Seite, den ich aufgrund des Puzzleteils im Vordergrund dieses Abschnitts genannt habe. Aus Gründen der Klarheit dieses Artikels habe ich die in die Vorlage eingefügten Go-Variablen durch den generierten HTML-Code ersetzt.

single.html

  

    

    

        

          

              

                Lorem ipsum dolor
              
              

                Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque.
              
              

                Duis aute irure dolor in reprehenderit
              
              

                in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et.
              
          
          

            
        
      
    

Dieser Codeabschnitt ist relativ kompakt, aber er verdient eine Diskussion. Zusätzlich zu den HTML-Elementen gibt es eine ganze Reihe von CSS-Klassen, die aus der Bootstrap-Bibliothek stammen, einem der ursprünglichen Open-Source-CSS-Frameworks für responsive Webdesigns.

Unter den benutzerdefinierten Klassen wie about-body, die ich zum Hinzufügen benutzerdefinierter Stile verwendet habe, gibt es Klassen wie Container, Row, Col-12 oder Col-MD-6, MB-5 und MB-3.

Alle letztgenannten Klassen sind Bootstrap-Klassen, die dazu dienen, dass die Text- und Bildelemente auf dem Bildschirm die Breite der Seite teilen, wenn das Ansichtsfenster eine bestimmte Breite überschreitet (col-md-6), oder einen Rand unten anwenden einer bestimmten Menge an die

-Tags (mb-3 oder mb-5).

Die Bootstrap-Klassen spielen in diesem Beitrag jedoch keine Rolle. Die Klasse, auf die wir uns konzentrieren sollten, ist der Puzzle-Abschnitt, der den gesamten Text und das Bild der Puzzleteile umschließt.

In dieser Puzzle-Abschnittsklasse werden wir die Eigenschaft „clip-path“ hinzufügen, um den hellgrauen Hintergrund hinter dem Text und dem Bild mit dem leicht geneigten, nach oben und rechts gerichteten Design anzuzeigen.

Fügen Sie den CSS-Clip-Pfad zum Shape-Puzzle-Bereich hinzu

Da ich nicht ganz sicher war, wie ich ein normales, rechteckiges

.about-body {
  // this white sets the white background color for the whole webpage
  background-color: white; 

  .puzzle-section {
    // clip-path code copied from the clip-path maker website
    clip-path: polygon(0 0, 100% 0%, 100% 75%, 0% 100%);
    background-color: light-grey;
    padding: 2rem 0 10rem 0;
  }
}