So erstellen Sie CSS -Bandformen mit einem einzelnen Element

Verwenden Sie moderne CSS -Tipps, um coole CSS -Bandformen mit nur einer kleinen Menge Code zu erstellen! In diesem Artikel wird gezeigt, wie verschiedene Bandformen mit einzelnen Elementen und CSS -Variablen erstellt und schöne Schwebeanimationen erreicht werden, ohne dass feste Größen oder magische Zahlen erforderlich sind.

Schlüsselpunkte:

• moderne CSS -Spitzen erleichtern es einfach, CSS -Bandformen zu erstellen, die mit nur einem einzelnen Element und CSS -Variablen gesteuert werden, ohne dass feste Größen oder magische Zahlen erforderlich sind.
• Erstellen von CSS -Bandformen beinhaltet das Definieren von Variablen, die Formen und Farben steuern, clip-path zur Ernte der gewünschten Form verwendet und box-shadow zum Erstellen gefalteter Teile des Bandes erstellen.
• CSS lh Einheiten (entsprechend line-height Werten) werden verwendet, um die Höhe des Bandes zu steuern, und können in Verbindung mit clip-path und CSS -Variablen verwendet werden, um hervorragende Schwebeanimationen zu erstellen.
• Erstellen einer rotierenden CSS-Bandform beinhaltet die Verwendung neuer trigonometrischer Funktionen und CSS-Variablen und calc(), die Teile des Hauptelements mit Gradientenfarben erstellen und die Teile hinter dem Hauptelement mit Pseudoelementen erstellen.

In diesem Artikel werden ausführliche Möglichkeiten untersucht, um zwei Arten von CSS-Bandformen zu erstellen: gefaltetes Band und Rotationsband.

Erstellen Sie eine gefaltete CSS -Bandform

Definieren Sie zuerst die Variablen, die die Form des Bandes definieren:

.ribbon {
  --r: 20px; /* 控制丝带的切口 */
  --s: 20px; /* 折叠部分的大小 */
  --c: #d81a14; /* 颜色 */
}

Verwenden Sie als nächstes hauptsächlich das Attribut clip-path. Die folgende Abbildung zeigt die zu verwendende Polygonform:

Fügen Sie den inneren Rand hinzu, um zu vermeiden, dass der Text geschnitten wird, und wenden Sie dann clip-path:

an

.ribbon {
  --r: 20px; 
  --s: 20px; 
  --c: #d81a14;

  line-height: 1.6; /* 控制高度 */
  padding-inline: 1.2lh calc(var(--r) + .2lh);
  background: var(--c);
  clip-path: polygon(1lh 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,100% 100%, 0 100%,0 100%); 
}

Verwenden Sie die CSS -LH -Einheit

lh Einheiten entsprechen den Werten line-height. Da die Verwendung von Einzellinientext line-height die Steuerhöhe festlegt, entspricht 1lh der Höhe des Elements. In clip-path ist es notwendig, die Form eines isschenkellen Dreiecks zu schneiden. 1lh

Um einen zusammengebrochenen Abschnitt zu erstellen, verwenden Sie immer noch

und aktualisieren Sie das vorherige Polygon. Die Klugheit von clip-path besteht darin, dass es den Inhalt "außerhalb" der Grenze des Elements tauchen kann. Durch Hinzufügen von clip-path kann der äußere abgeschnittene Teil sichtbar gemacht werden. box-shadow

update clip-path vier neue Punkte enthalten, von denen drei außerhalb des Elements liegen:

.ribbon {
  --r: 20px; /* 控制丝带的切口 */
  --s: 20px; /* 折叠部分的大小 */
  --c: #d81a14; /* 颜色 */
}

Fügen Sie schließlich einen Gradienten und einen anderen box-shadow hinzu, um den Schatteneffekt zu vervollständigen.

Hier im Originaltext gezeigt.)

Schlussfolgerung

In diesem Artikel werden moderne CSS -Funktionen wie CSS -Variablen,

und trigonometrische Funktionen untersucht und kombiniert sie, um coole Bandformen zu erstellen. Weitere Beispiele finden Sie in der vollständigen Sammlung im ursprünglichen Link.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie CSS -Bandformen mit einem einzelnen Element. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!