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!