Verwenden Sie CSS, um einige häufig auftretende seltsame Schaltflächen einfach zu implementieren

Hintergrund

In der Gruppe werden einige Studierende verwandte Fragen stellen, beispielsweise wie man mit CSS eine Schaltfläche mit eingefügter Ecke implementiert oder wie man eine Schaltfläche mit einem Pfeil implementiert.

Dieser Artikel basiert auf einigen Schaltflächen, die häufig in Designentwürfen vorkommen und deren Implementierung mit CSS etwas schwierig und anspruchsvoll ist. Es wird erklärt, wie Sie diese so weit wie möglich mit CSS implementieren.

Schauen wir uns zunächst die folgenden häufig vorkommenden Schaltflächenformen an:

Rechteckige und abgerundete Schaltflächen

Normalerweise stoßen wir auf zwei Arten von Schaltflächen – rechteckige und abgerundete:

Sie sind sehr einfach, mit Breite, Höhe, abgerundeten Ecken und einer Hintergrundfarbe.

 <div class='btn rect'>Rechteck</div>
    <div class='btn circle'>Kreis</div>

.btn {
    Rand: 8px automatisch;
    Flex-Schrumpfen: 0;
    Breite: 160px;
    Höhe: 64px;
}
.rect {
    Hintergrund: #f6ed8d;
}

.Kreis {
    Rahmenradius: 64px;
    Hintergrund: #7de3c8;
}

Trapez und Parallelogramm

Darüber hinaus erscheinen, basierend auf der Verformung des Rechtecks, häufig trapezförmige und parallelogrammförmige Schaltflächen.

Um dies zu erreichen, können Sie hauptsächlich transform verwenden. Beachten Sie jedoch, dass nach der Verwendung transform auch der Text im Etikett verformt wird. Daher verwenden wir normalerweise Pseudoelemente von Elementen, um die Form zu erreichen, damit der Text in der Schaltfläche nicht beeinträchtigt wird.

Parallelogramm

Verwenden Sie einfach transform: skewX() . Beachten Sie, dass Sie, wie oben erwähnt, das Pseudoelement des Elements verwenden, um das Parallelogramm zu realisieren, damit der darin enthaltene Text nicht beeinträchtigt wird.

<div class='btn parallelogram'>Parallelogramm</div>

.parallelogram {
    Position: relativ;
    Breite: 160px;
    Höhe: 64px;

    &::vor {
        Inhalt: "";
        Position: absolut;
        oben: 0;
        links: 0;
        unten: 0;
        rechts: 0;
        Hintergrund: #03f463;
        Transformation: schrägX(15 Grad);
    }
} 

Wenn Sie keine Pseudoelemente verwenden möchten, kann ein Parallelogramm zusätzlich zu transform: skewX() auch mit einem Gradienten erreicht werden.

Wahrscheinlich ist es so:

{
    Hintergrund: linearer Farbverlauf (45 Grad, transparent 22 %, #04e6fb 22 %, #9006fb 78 %, transparent 0);
}

Trapez

Das Trapez ist etwas komplizierter als das Parallelogramm. Es nutzt die perspective stärker und verwendet tatsächlich bestimmte 3D-Transformationen. Das Prinzip ist ein um die X-Achse gedrehtes Rechteck, wie folgt:

Verwenden Sie perspective und transform: rotateX() . Natürlich können sie auch zusammen geschrieben werden:

<div class='btn trapezoid'>Trapez</div>

.parallelogram {
    Position: relativ;
    Breite: 160px;
    Höhe: 64px;

    &::nach {
          Inhalt:"";
          Position: absolut;
          oben: 0; rechts: 0; unten: 0; links: 0;
          transformieren: Perspektive (40px) drehenX(10 Grad);
          Transform-Origin: unten;
          Hintergrund: #ff9800;
    }
} 

Cutaway - einfarbiger Hintergrund und Hintergrund mit Farbverlauf

Als nächstes kommen die abgeschnittenen Ecken. Die gängigste Methode hierfür ist die Verwendung linear-gradient . Schauen wir uns diese Abbildung an.

<div></div>

.Einkerbung {
    Hintergrund: linearer Farbverlauf (135 Grad, transparent 10 Pixel, #ff1493 0);
    Hintergrundwiederholung: keine Wiederholung;
}

Die Ergebnisse sind wie folgt:

Auf dieser Grundlage müssen wir nur mehrere Farbverläufe verwenden, um vier solcher Grafiken zu erzielen, und background-position verwenden, um die vier Ecken zu lokalisieren:

<div class="einkerben">Einkerbung</div>

.Einkerbung {
    Hintergrund: 
        linearer Farbverlauf (135 Grad, transparent 10 Pixel, #ff1493 0) oben links,
        linearer Farbverlauf (-135 Grad, transparent 10px, #ff1493 0) oben rechts,
        linearer Farbverlauf (-45 Grad, transparent 10px, #ff1493 0) unten rechts,
        linearer Farbverlauf (45 Grad, transparent 10 Pixel, #ff1493 0) unten links;
    Hintergrundgröße: 50 % 50 %;
    Hintergrundwiederholung: keine Wiederholung;
} 

Verwenden des Clip-Pfads zum Erstellen von Grafiken mit abgeschnittenem Hintergrund und Farbverlauf

Natürlich gibt es bei dieser Technik ein Problem. Wenn die Hintergrundfarbe ein Farbverlauf sein muss, wird diese Methode ziemlich umständlich.

Glücklicherweise gibt es eine andere Möglichkeit, eine Eckform mithilfe von clip-path auszuschneiden. Auf diese Weise kann die Hintergrundfarbe jede beliebige benutzerdefinierte Farbe sein, egal ob es sich um einen Farbverlauf oder eine Volltonfarbe handelt:

<div class="clip-notching">Einkerbung</div>

.clip-kerbung {
    Hintergrund: linearer Farbverlauf(
        45 Grad,
        #f9d9e7,
        #ff1493
    );
    Clip-Pfad: Polygon(
        15px 0,
        berechnet (100 % - 15 Pixel) 0,
        100 % 15 Pixel,
        100 % berechnet (100 % – 15 Pixel),
        berechnen (100 % – 15 Pixel) 100 %,
        15px 100%,
        0 berechnet (100 % - 15 Pixel),
        0 15px
    );
}

Implementieren Sie einfach einen Hintergrund mit Farbverlauf. Der Kern besteht darin clip-path: polygon() zu verwenden, um die gewünschte Form (ein 8-seitiges Polygon) basierend auf dem Rechteck mit Farbverlauf auszuschneiden:

Natürlich lässt sich der obige Code sehr einfach mit dem folgenden Sechseck verknüpfen, das mithilfe von Farbverläufen und clip-path leicht erstellt werden kann:

Pfeiltasten

Als nächstes kommt der Pfeil-Button. Schauen Sie sich den Eck-Abschneide-Button oben genau an. Wenn die Ecken auf beiden Seiten ausreichend abgeschnitten sind, entsteht eine Pfeilform.

Wir können zwei Farbverläufe verwenden, um eine einzelne Pfeilschaltfläche zu erstellen:

<div class="Pfeil">Pfeil</div>

&.Pfeil {
    Hintergrund: linearer Farbverlauf(
                -135 Grad,
                transparent 22px,
                #04e6fb 22px,
                #65ff9a 100 %
            )
            oben rechts,
        linearer Gradient(
                -45 Grad,
                transparent 22px,
                #04e6fb 22px,
                #65ff9a 100 %
            )
            unten rechts;
    Hintergrundgröße: 100 % 50 %;
    Hintergrundwiederholung: keine Wiederholung;
}

Ein Pfeil erscheint:

Es handelt sich um eine Kombination aus zwei übereinanderliegenden Verlaufsblöcken. Sie können dies sofort erkennen, indem Sie die Farbe ändern:

Was wäre, wenn es eine Pfeilform wie diese hätte?

In ähnlicher Weise handelt es sich auch um die Überlagerung zweier Farbverläufe, und die Farbverlaufsfarbe ist transparent --> Farbe A --> Farbe B --> transparent. Natürlich können Sie hier auch clip-path verwenden:

Hier ist die clip-path -Lösung:

{
    Hintergrund: linearer Farbverlauf (45 Grad, #04e6fb, #65ff9a);
    Clip-Pfad: Polygon(
        0 0,
        30px 50%,
        0 100 %,
        berechnen (100 % – 30 Pixel) 100 %,
        100 % 50 %,
        berechnen (100 % – 30 Pixel) 0
    );
}

Beschriftetes Filet

Die folgende Knopfform erscheint häufig in Gutscheinen. Die häufigste Lösung ist die Verwendung eines Farbverlaufs. Natürlich ist der hier verwendete radiale Farbverlauf anders als beim Eckschnitt.

Sehen wir uns zunächst ein einfaches Beispiel an:

<div></div>

div {
    Hintergrundbild: radialer Farbverlauf (Kreis bei 100 % 100 %, transparent 0, transparent 12px, #2179f5 12px);
}

Sie können ein Diagramm wie das folgende erhalten:

Kontrollieren Sie also einfach background-size und implementieren Sie 4 solcher Grafiken in den 4 Ecken:

<div class="eingefügter Kreis">eingefügter Kreis</div>

&.eingefügter Kreis {
    Hintergrundgröße: 70 % 70 %;
    Hintergrundbild: radialer Farbverlauf(
            Kreis bei 100% 100%,
            transparent 0,
            transparent 12px,
            #2179f5 13px
        ),
        radialer Gradient(
            Kreis bei 0 0,
            transparent 0,
            transparent 12px,
            #2179f5 13px
        ),
        radialer Gradient(
            Kreis bei 100% 0,
            transparent 0,
            transparent 12px,
            #2179f5 13px
        ),
        radialer Gradient(
            Kreis bei 0 100%,
            transparent 0,
            transparent 12px,
            #2179f5 13px
        );
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundposition: rechts unten, links oben, rechts oben, links unten;
} 

Verwenden Sie eine Maske, um einen abgerundeten Knopf mit Farbverlauf zu erhalten

Was ist, wenn die Hintergrundfarbe einen Farbverlauf erfordert?

Angenommen, wir haben ein rechteckiges Hintergrundmuster. Dann müssen wir nur mask verwenden, um eine Maskierungsebene zu implementieren, und die Eigenschaften der mask nutzen, um die vier Ecken abzudecken.

Der Code der mask ist dem oben erwähnten Code für abgerundete Ecken sehr ähnlich. Durch eine einfache Änderung kann ein mit Farbverlauf versehener Button mit abgerundeten Ecken erstellt werden:

<div class="mask-inset-circle">Einfügungskreis</div>

.mask-inset-circle {
    Hintergrund: linearer Farbverlauf (45 Grad, #2179f5, #e91e63);
    Maske: radialer Farbverlauf(
            Kreis bei 100% 100%,
            transparent 0,
            transparent 12px,
            #2179f5 13px
        ),
        radialer Gradient(
            Kreis bei 0 0,
            transparent 0,
            transparent 12px,
            #2179f5 13px
        ),
        radialer Gradient(
            Kreis bei 100% 0,
            transparent 0,
            transparent 12px,
            #2179f5 13px
        ),
        radialer Gradient(
            Kreis bei 0 100%,
            transparent 0,
            transparent 12px,
            #2179f5 13px
        );
    Maskenwiederholung: keine Wiederholung;
    Maskenposition: rechts unten, links oben, rechts oben, links unten;
    Maskengröße: 70 % 70 %;
}

Auf diese Weise erhalten wir eine Grafik wie diese:

Um den obigen Code zu verstehen, müssen Sie natürlich zuerst das Prinzip der CSS- mask verstehen. Wenn Sie damit noch nicht vertraut sind, können Sie sich meinen Artikel ansehen:

Magische CSS-MASKE

Unregelmäßiges abgerundetes Rechteck

Die folgende Schaltflächenform ist in letzter Zeit auch die am häufigsten gestellte Frage. Schauen wir uns zunächst die Form an:

Es ist nicht einfach, es zu benennen. Eine Seite ist ein regelmäßiger rechter Winkel mit abgerundeten Ecken, und die andere Seite ist eine Fase mit abgerundeten Ecken.

Tatsächlich besteht es aus einem abgerundeten Rechteck + einem abgerundeten Parallelogramm:

Mithilfe von zwei Pseudoelementen können sie daher einfach implementiert werden:

<div class="skew">Schiefe</div>

.skew {
    Position: relativ;
    Breite: 120px;

    &::nach {
        Inhalt: "";
        Position: absolut;
        oben: 0;
        links: 0;
        rechts: 0;
        unten: 0;
        Rahmenradius: 10px;
        Hintergrund: orange;
        Transformation: skewX(15 Grad);
    }
    &::vor {
        Inhalt: "";
        Position: absolut;
        oben: 0;
        rechts: -13px;
        Breite: 100px;
        Höhe: 64px;
        Rahmenradius: 10px;
        Hintergrund: orange;
    }
} 

Da ein Pseudoelement einem anderen überlagert ist, wird für eines davon ein Farbverlauf und für das andere eine Volltonfarbe verwendet. Ihre Farben können perfekt miteinander verbunden werden, wodurch die Farbverlaufsgrafik realisiert wird:

Schaltfläche "Abgerundete Ecke"

Die folgende Schaltflächenform wird häufig auf der Registerkartenseite angezeigt, ähnlich der Chrome-Paginierung:

Lassen Sie uns die Form des Knopfes genauer betrachten. Es handelt sich eigentlich um einen Stapel aus drei Teilen:

Sie müssen nur herausfinden, wie Sie die Bogendreiecke auf beiden Seiten erreichen. Hier verwenden wir immer noch den Farbverlauf – radialen Farbverlauf. Tatsächlich ist es so. Wie in der folgenden Abbildung gezeigt, müssen wir nur den schwarzen Teil durch transparent ersetzen, indem wir zwei Pseudoelemente verwenden:

Der Code lautet wie folgt:

<div class="Außenkreis">Außenkreis</div>

.Außenkreis {
    Position: relativ;
    Hintergrund: #e91e63;
    Rahmenradius: 10px 10px 0 0;

    &::vor {
        Inhalt: "";
        Position: absolut;
        Breite: 20px;
        Höhe: 20px;
        links: -20px;
        unten: 0;
        Hintergrund: #000;
        Hintergrund: radialer Farbverlauf (Kreis bei 0 0, transparent 20px, #e91e63 21px);
    }
    &::nach {
        Inhalt: "";
        Position: absolut;
        Breite: 20px;
        Höhe: 20px;
        rechts: -20px;
        unten: 0;
        Hintergrund: #000;
        Hintergrund: radialer Farbverlauf (Kreis bei 100 % 0, transparent 20px, #e91e63 21px);
    }
}

Sie können erhalten:

Den vollständigen Code für alle oben genannten Grafiken können Sie hier sehen: CodePen-Demo – CSS Verschiedene Schaltflächenformen | CSS Verschiedene Schaltflächenformen

Um zusammenzufassen

Basierend auf der obigen Implementierung ist es nicht schwer zu erkennen, dass einige leicht spezielle Schaltflächen durch Spleißen, Taschenspielertricks, Maskierung und andere Methoden implementiert werden.

Und darin:

• Farbverlauf (linearer Farbverlauf, linear-gradient , radialer Farbverlauf, radial-gradient , mehrere Farbverläufe)
• mask
• clip-path
• transform

Sie spielen eine wichtige Rolle. Wenn wir sie geschickt einsetzen, können wir diese Grafiken problemlos handhaben und ihre Verformungen mit Leichtigkeit bewältigen.

Die obige Grafik kann in Kombination mit filter: drop-shadow() grundsätzlich unregelmäßige Schatten erzeugen.

Darüber hinaus wird unten ein komplexeres Diagramm angezeigt:

Lassen Sie uns das Bild zerlegen. Obwohl CSS gut ist, muss bei der tatsächlichen Verwendung auch das Input-Output-Verhältnis berücksichtigt werden.

endlich

Der Zweck dieses Artikels ist eher, als einfaches Handbuch zu dienen. In der Praxis gibt es möglicherweise bessere Möglichkeiten, die oben genannten Effekte zu erzielen. Dieser Artikel zählt sie nicht einzeln auf. Sie können sie gerne ergänzen oder korrigieren.

Damit ist dieser Artikel zu Ende. Ich hoffe, dieser Artikel ist hilfreich für Sie.

Weitere wunderbare technische CSS-Artikel sind in meinem Github – iCSS – gesammelt. Sie werden ständig aktualisiert. Klicken Sie einfach auf einen Stern, um sich anzumelden und zu sammeln.

Wenn Sie Fragen oder Anregungen haben, können Sie sich gerne an mich wenden. Dies ist ein Originalartikel und meine Schreibfähigkeiten sind begrenzt. Wenn der Artikel etwas falsch enthält, lassen Sie es mich bitte wissen.

Dies ist das Ende dieses Artikels darüber, wie Sie mit CSS ganz einfach einige häufig vorkommende Schaltflächen mit seltsamen Formen implementieren können. Weitere relevante CSS-Inhalte zu Schaltflächen mit seltsamen Formen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!