CSS3 implementiert fehlendes Eckrechteck, gefaltetes Eckrechteck und fehlenden Eckrand
|
Vorwort Vor ein paar Tagen bin ich zufällig auf die Funktion des fehlenden Eckrechtecks gestoßen. Mein erster Gedanke war, ein absolut positioniertes Pseudoelement zu erstellen, das bei Bedarf blockiert werden kann, oder mit dem UI-Experten zu sprechen. Plötzlich kam mir eine Idee und ich erinnerte mich an das Buch „CSS Revealed“, das ich zuvor gelesen hatte. Ich erinnerte mich an dieses Kapitel und schrieb diesen Artikel. Lassen Sie mich Ihnen ohne weitere Umschweife zunächst ein Rendering zeigen. Fehlende Ecke
1. Pseudoelement-Implementierung <div Klasse = "bg cover"></div>
.bg{
Breite: 120px;
Höhe: 80px;
Hintergrund: #58a;
} /* Die folgenden Elemente verwenden alle diesen Stil*/
.Abdeckung{
Position: relativ;
}
.cover::vor {
Inhalt: '';
Breite: 0;
Höhe: 0;
Position: absolut;
rechts: 0;
unten: 0;
Rand: 5px durchgezogen #fff;
Farbe des oberen Rahmens: transparent;
Rahmenfarbe links: transparent;
}
.cover::nach{
Inhalt: '';
Breite: 0;
Höhe: 0;
Position: absolut;
links: 0;
oben: 0;
Rand: 5px durchgezogen #fff;
Farbe des unteren Rahmens: transparent;
Rahmenfarbe rechts: transparent;
}Zeichnen Sie mit einem Pseudoelement ein Dreieck in derselben Farbe wie der Hintergrund und positionieren Sie es dann absolut dort, wo Sie es blockieren möchten, wie unten gezeigt. Dadurch können jedoch nur zwei Ecken fehlen.
2. Schrittweise Umsetzung CSS-Syntax Hintergrundbild: linearer Farbverlauf (Richtung, Farbstopp1, Farbstopp2, …);
Und der Farbverlauf kann einen Winkel (z. B. 45 Grad) als Richtung annehmen und die Positionsinformationen des Farbstopps können auch ein absoluter Längenwert sein.
45 Grad: gibt die Richtung von links unten nach rechts oben an -45 Grad: gibt die Richtung von rechts unten nach links oben an ...... <div Klasse="bg missAngle"></div>
.missAngle{
Hintergrund: linearer Farbverlauf (-45 Grad, transparent 10 Pixel, Nr. 58a 0);
}
Mehrere Blickwinkel erreichen <div Klasse="bg rect"></div>
.rect{
Hintergrund: linearer Farbverlauf (135 Grad, transparent 10 Pixel, #58a 0) oben links,
linearer Farbverlauf (-135 Grad, transparent 10px, #58a 0) oben rechts,
linearer Farbverlauf (-45 Grad, transparent 10px, #58a 0) unten rechts,
linearer Farbverlauf (45 Grad, transparent 10 Pixel, Nr. 58a 0) unten links;
Hintergrundgröße: 50 % 50 %;
Hintergrundwiederholung: keine Wiederholung;
/* Internet Explorer 9 und frühere Versionen unterstützen keine Farbverläufe. */
}
Dies besteht eigentlich aus vier Grafiken, wie unten gezeigt
Hintergrundgröße: 50% 50%; bedeutet, dass jede kleine Grafik 50% breit und 50% hoch ist Bogenförmig geschnittene Ecken <div Klasse = "bg cricle"></div>
.cricle{
Hintergrund: radial-gradient(Kreis oben links, transparent 10px, #58a 0) oben links,
radial-gradient(Kreis oben rechts, transparent 10px, #58a 0) oben rechts,
radial-gradient(Kreis unten rechts, transparent 10px, #58a 0) unten rechts,
radial-gradient(Kreis unten links, transparent 10px, #58a 0) unten links;
Hintergrundgröße: 50 % 50 %;
Hintergrundwiederholung: keine Wiederholung;
}
Und schließlich unterstützen Internet Explorer 9 und früher keine Farbverläufe. Hier gibt es ein Problem. Wenn der Browser gezogen wird und die Breite kleiner als die definierte Breite ist, kann eine weiße Lücke auftreten. Darauf müssen Sie achten, wie in der folgenden Abbildung gezeigt
Wenn das Hintergrundbild ein Bild ist, funktioniert der Farbverlauf nicht gut, wenn die Ecken fehlen. Verwenden Sie als Nächstes den Clip-Pfad Clip-Path-Implementierung Die CSS-Eigenschaft „Clip-Path“ erstellt einen Clipping-Bereich, in dem nur ein Teil eines Elements sichtbar ist. Der Teil innerhalb des Bereichs wird angezeigt, und der Teil außerhalb des Bereichs wird ausgeblendet. Clip-Pfad: Polygon (xy, x1 y1, x2 y2, x3 y3, …) xy, x1 y1, x2 y2, x3 y3, ... Diese stellen die Punkte auf den Koordinatenachsen dar. Zeichnen Sie eine geschlossene Figur basierend auf allen Punkten. <div Klasse="bg rect-clip"></div>
.rect-clip{
Hintergrundbild: URL(./im.jpg);
Hintergrundgröße: 100 % 100 %;
Hintergrundwiederholung: keine Wiederholung;
Clip-Pfad: Polygon (15px 0, calc (100 % – 15px) 0, 100 % 15px,
100 % berechnet (100 % – 15 Pixel), berechnet (100 % – 15 Pixel) 100 %,
15px 100 %, 0 Berechnung (100 % – 15px), 0 15px)
}Effektbild:
Die Gesamtbreite beträgt 120px berechnen(100% - 15px) => 105px 100 % => 120 Pixel
Verbinden Sie die entsprechenden Punkte, um ein Rechteck mit fehlenden Ecken zu bilden Die Clip-Pfad-Funktion ist recht leistungsstark. Sie kann verschiedene Formen zeichnen, wie Rauten, fünfzackige Sterne usw. <div Klasse="bg clip5"></div>
.clip5{
Rand links: 30px;
/*Clip-Pfad: Einschub (25 % 0 25 % 0 rund 0 25 % 0 25 %);*/
Clip-Pfad: Einschub (0 rund 0 25 %); /*Kann abgekürzt werden*/
/* inset(<oben> <rechts> <unten> <links> rund <oberer Radius> <rechter Radius> <unterer Radius> <linker Radius>) */
/* Inset verwendet vier Werte (entsprechend der Reihenfolge „oben, rechts, unten, links“), um den Eckradius festzulegen. */
}
Für Animationen <div Klasse="Zeilenbox"> <div Klasse = "Zeile Zeile1"></div> <div Klasse="Zeile Zeile2"></div> <div Klasse = "Zeile Zeile3"></div> </div>
.Zeilenbox{
Breite: 100px;
Höhe: 60px;
}
.Linie{
Breite: 100 %;
Höhe: 100%;
Hintergrund: #26b91a;
}
.line1{
-webkit-clip-path: Polygon (80 % 0, 40 % 40 %, 80 % 80 %);
Clip-Pfad: Polygon (80 % 0, 40 % 40 %, 80 % 80 %);
Animation: eine 2s 1s unendlich;
}
.line2{
Clip-Pfad: Polygon (10 % 10 %, 60 % 40 %, 50 % 90 %);
Animation: b 2s 1s unendlich;
}
.line3{
Clip-Pfad: Polygon (20 % 20 %, 30 % 20 %, 30 % 50 %, 20 % 50 %);
Animation: c 2s 1s unendlich;
}
@keyframes a{
90 % {
Hintergrund: #1f351f;
}
100 % {
Clip-Pfad: Polygon (50 % 40 %, 25 % 100 %, 75 % 100 %);
}
}
@keyframes b{
90 % {
Hintergrund: #1f351f;
}
100 % {
Clip-Pfad: Polygon (50 % 0, 0 % 100 %, 100 % 100 %);
}
}
@keyframes c{
90 % {
Hintergrund: #1f351f;
}
100 % {
Clip-Pfad: Polygon (40 % 0, 60 % 0, 60 % 100 %, 40 % 100 %);
}
}
Hier sind nur einige der Funktionen von clip-path aufgeführt. Weitere Formen finden Sie hier . Es handelt sich um eine Website, die verschiedene Formen (einschließlich beliebiger Drag & Drop-Anpassung) generieren und direkt Code generieren kann. Obwohl damit verschiedene Formen gezeichnet werden können, ist die Kompatibilität nicht sehr gut. Es funktioniert gut mit Google Version 79 und Firefox 71, aber nicht mit IE. Informationen zur spezifischen Kompatibilität finden Sie hier Wenn bei Ihrem Projekt Kompatibilitätsprobleme berücksichtigt werden müssen, können Sie auch ein Bild als Hintergrundbild verwenden, das Bild komprimieren oder Pseudoelemente verwenden, denen höchstens zwei Ecken fehlen. Wählen Sie je nach der tatsächlichen Situation die Lösung, die zu Ihrem Projekt passt. Fehlende Eckbegrenzung <div Klasse="out-rect"> <div Klasse="in-rect"></div> </div>
.out-rect {
Rand oben: 30px;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Inhalt ausrichten: zentriert;
Breite: 200px;
Höhe: 80px;
Polsterung: 5px;
Hintergrund: linearer Farbverlauf (-45 Grad, transparent 10 Pixel, Nr. 58a 0) oben rechts;
Hintergrundgröße: 100 % 100 %;
Hintergrundwiederholung: keine Wiederholung;
}
.in-rect{
Breite: 100 %;
Höhe: 100%;
Hintergrund: linearer Farbverlauf (-45 Grad, transparent 8px, #fff 0) oben rechts;
Hintergrundgröße: 100 % 100 %;
Hintergrundwiederholung: keine Wiederholung;
}
Der Effekt der Überlagerung zweier fehlender Eckrechtecke. Breite und Höhe des inneren Rechtecks entsprechen der Größe des übergeordneten Divs. Solange es vertikal zentriert bleibt, entspricht der Füllwert der Breite des endgültig gerenderten Rahmens. Ecke falten Immer noch mit dem linearen Gradientengradienten gibt es eine zusätzliche Ecke auf der Grundlage des fehlenden Eckrechtecks Das Wirkungsdiagramm sieht wie folgt aus:
Implementieren Sie zuerst die erste <div Klasse="bg Klappwinkel"></div>
.bg{
Breite: 120px;
Höhe: 80px;
Hintergrund: #58a;
}
.foldingAngle{
Hintergrund:
linearer Farbverlauf (nach links unten, transparent 50 %, rgba (0, 0, 0, 0,4) 0) keine Wiederholung 100 % 0 / 1,4em 1,4em,
linearer Farbverlauf (-135 Grad, transparent 1em, #58a 0);
}Rendern
linearer Farbverlauf (nach links unten, transparent 50 %, rgba (0, 0, 0, 0,4) 0) keine Wiederholung 100 % 0 / 1,4em 1,4em Zeichnen Sie nach links unten einen Farbverlauf aus halb transparent und halb schwarz, Position: 100 % 0 Größe: 1,4 em 1,4 em wie folgt:
Größe ist 1,4em 1,4em Dieses Dreieck ist ein rechtwinkliges Dreieck mit 45°, einem rechten Winkel von 1,4em und einer Hypothenuse von 1,4/√2 ≈ 1 Zeichnen Sie also ein Rechteck mit einer fehlenden Ecke von 1em linearer Farbverlauf (-135 Grad, transparent 1em, #58a 0) -135 Grad Zeichnen Sie ein fehlendes Eckrechteck nach links unten
Die beiden Farbverläufe überlappen sich, sodass folgender Effekt entsteht:
Achten Sie darauf, zuerst das kleine Dreieck und dann das fehlende Eckrechteck zu zeichnen, da das Rechteck sonst das kleine Dreieck überdeckt. Untere rechte Ecke <div Klasse="bg foldingAngle2"></div>
.foldingAngle2{
Hintergrund:
linearer Farbverlauf (nach links oben, transparent 50 %, rgba (0, 0, 0, 0,4) 0) keine Wiederholung 100 % 100 % / 1,4em 1,4em,
linearer Farbverlauf (-45 Grad, transparent 1em, #58a 0);
}
Dies sieht etwas unrealistisch aus und in Wirklichkeit sind die Winkel nicht immer 45°. Zeichnen Sie unten einen 30°-Winkel, zeichnen Sie zuerst ein fehlendes Eckrechteck <div Klasse="bg foldingAngle2"></div>
.foldingAngle2{
Rand oben: 30px;
Position: relativ;
Rahmenradius: .3em;
Hintergrund: linearer Farbverlauf (-150 Grad, transparent 1em, #58a 0);
}
Als nächstes zeichnen Sie die Ecken Laut den roten Zahlen im obigen Bild beträgt die Eckenbreite 2/√3 ≈ 1,15em. Länge: 2em. Zeichnen Sie die Ecke.
.foldingAngle2::before{
Inhalt: '';
Position: absolut;
rechts: 0;
oben: 0;
Breite: 1,15em;
Höhe: 2em;
Hintergrund: linearer Farbverlauf (nach links unten, transparent 50 %, rgba(0, 0, 0, 0,2) 0, rgba(0, 0, 0, 0,3)) 100 % 0 keine Wiederholung;
Rahmen unten links Radius: erben;
}
Probieren Sie es aus
.foldingAngle2::before{
Inhalt: '';
Position: absolut;
rechts: 0;
oben: 0;
Breite: 1,15em;
Höhe: 2em;
Hintergrund: linearer Farbverlauf (nach links unten, transparent 50 %, rgba(0, 0, 0, 0,2) 0, rgba(0, 0, 0, 0,3)) 100 % 0 keine Wiederholung;
transformieren: drehen (-30 Grad);
transform-origin: bottom right; /* Mache die untere rechte Ecke des Dreiecks zum Rotationszentrum*/
}
Verschieben Sie es ein wenig nach oben, der Versatz beträgt 2-1,15 = 0,85em, und fügen Sie etwas Schatten hinzu
.foldingAngle2::before{
Inhalt: '';
Position: absolut;
rechts: 0;
oben: 0;
Breite: 1,15em;
Höhe: 2em;
Hintergrund: linearer Farbverlauf (nach links unten, transparent 50 %, rgba(0, 0, 0, 0,2) 0, rgba(0, 0, 0, 0,3)) 100 % 0 keine Wiederholung;
transformieren: verschiebeY(-0,85em) drehen(-30 Grad);
Transform-Origin: unten rechts;
Kastenschatten: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
border-bottom-left-radius: inherit; /* Die untere linke Ecke erbt den Border-Radius */
}
Das ist der endgültige Effekt Das Ändern der Winkel-, Längen- und Breitenberechnungen ist etwas mühsam. Sie können den Präprozessor @mixin verwenden. Hier werde ich nur über den Prozess sprechen, ohne ins Detail zu gehen. Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: Navicat für MySQL-Tutorial
>>: So vermeiden Sie Zeichenverfälschungen beim Importieren externer Dateien (js/vbs/css)
Artikel empfehlen
HTML-Grundlagen - CSS-Stylesheets, Style-Attribute, Format- und Layoutdetails
1. Position : fest Gesperrte Position (relativ zu...
So zeigen Sie den Nginx-Konfigurationsdateipfad und den Ressourcendateipfad an
Zeigen Sie den Pfad der Nginx-Konfigurationsdatei...
Lösung für Ubuntu 18.04, das keine Verbindung zum Netzwerk in der virtuellen VMware-Maschine herstellen kann
Die Lösung für das Problem, dass Ubuntu 18.04 in ...
Drei Implementierungsmethoden für die MySQL-Kopiertabelle und die Grant-Analyse
So kopieren Sie schnell eine Tabelle Erstellen Si...
Lösen Sie das Problem von secure_file_priv null
Fügen Sie secure_file_priv = ' '； führen ...
Das WeChat-Applet verwendet Canvas zum Zeichnen von Uhren
In diesem Artikel wird der spezifische Code zur V...
Zusammenfassung häufiger Probleme und Lösungen in Vue (empfohlen)
Es gibt einige Probleme, die nicht auf Vue beschr...
Geben Sie die Stildatei für die automatische Suchvorschlagsfunktion ein: suggestions.css
Code kopieren Der Code lautet wie folgt: .sugLaye...
Implementierung eines CSS-Festlayouts auf beiden Seiten und eines adaptiven Layouts in der Mitte
Analysieren Sie vier gängige Methoden und Prinzip...
SSH-Portweiterleitung, lokale Portweiterleitung, Remote-Portweiterleitung, dynamische Portweiterleitungsdetails
Teil 1 Übersicht über die SSH-Portweiterleitung H...
Detaillierte Erläuterung des Falls, in dem eine untergeordnete Vue-Komponente die Methode der übergeordneten Komponente aufruft
1. Rufen Sie die Methode der übergeordneten Kompo...
Was bedeutet href=# in einem Link?
Links zur aktuellen Seite. －－－－－－－－－－－－－－－－－－－ Übl...
Tutorial zur Nginx-Standortkonfiguration von Grund auf
Grundlagen Die Reihenfolge der Standortübereinsti...
Lösung für die geringe Schreibeffizienz von unter AIX gemountetem NFS
Von NFS bereitgestellte Dienste Mounten: Aktivier...
So deinstallieren Sie MySQL 5.7.19 unter Linux
1. Finden Sie heraus, ob MySQL zuvor installiert ...