Sådan skaber du fantastiske effekter med CSS-former

Feb 2, 2026

hvordan

Frontend udviklere har tendens til at tænke på rektangler; rektangler inde i rektangler inde i rektangler inde i rektangler. Vi kan ansætte tricks med grænser for at lave cirkler eller trekanter, men de er virkelig bare bare rektangulære kasser i forklædning. Godt det handler om at ændre sig med CSS. Former, A. W3C. Kandidatanbefaling, der vil ændre den måde, du tror på.

Juletilbud: Spar op til 47% på et abonnement på Net Magazine

CSS-former giver dig mulighed for at oprette geometriske former ved hjælp af formfunktioner: Cirkel (), ellipsis (), indsats () og polygon () og anbring dem på elementer eller effekter som klipning og filtre. Derudover kan formerne påvirke indholdets strømning, så du kan pakke tekst pænt omkring funktioner som cirkulære avatarer.

Måske er den mest kraftfulde formfunktion polygon (), da det giver dig mulighed for at skabe komplekse vilkårlige former ved hjælp af ubegrænsede punkter defineret ved hjælp af koordinatpar. Hvis du har brugt SVG. Dette vil være kendt for dig.

I denne vejledning bruger vi polygoner med Clip-path-ejendommen til at skære en geometrisk form ud af vores tekst, så kun det område, der er omsluttet i polygonen, er synligt. Vi tilføjer også nogle enkle overgange for at bringe effekten til livet. Du kan få fat i koden for hvert trin i denne repo fra Github, her. .

01. Begynd med HTML

Lad os først få vores HTML klar. Vi har bare brug for en & lt; div & gt; , vores. .clip. Klasse og vores tekst, men som vi bruger pseudo-elementer til denne effekt, tilføjer vi også en attribut med samme værdi som teksten, så vi kan læse den i CSS snarere end hard-kodende det.

 & lt; div class = "clip" data-content = "A cliping demo" & gt;
En clipping demo.
& lt; / div & gt;

Dernæst ønsker vi at få det til at fylde skærmen og justere tekstdødcentret - vi kan bruge nogle Flexbox. magi for dette. Lad os også stil og størrelse teksten.

 .clip {
// Fyld skærm
position: absolut;
TOP: 0;
Venstre: 0;
Bredde: 100%;
Højde: 100%;
// justering
Display: Flex; // Brug flex til justering
retfærdiggøre-indhold: center; // Horisontal justering
Juster-elementer: Center; // lodret justering
// Tekst styling.
Font-familie: 'Arbejdssans', Arial, Helvetica, Sans-Serif; // Arbejdssans er tilgængelig fra Google Fonts
Font-Vægt: 800;
Font-størrelse: 8rem;
Tekst-Align: Center;
Tekst-transformation: store bogstaver;
}

02. Tilføj lidt stil

Nu kan vi style the ::Før og ::efter pseudo-elementer, hvor hver bliver et lag oven på teksten. Som standard, ::efter vil have det højeste Z-indeks. Den praktiske. Attre () vælgeren vil læse værdien af vores dataindhold attribut.

Pseudo-elementerne deler positionen og Flexbox-egenskaberne, så vi kan refaktor vores CSS lidt og udnytte kraften i SCSS for at holde vores stylesheet rydde. Font styling vil blive arvet. Vi bruger ... at angive de egenskaber, vi har allerede dækket.

 .clip {
...
// position selv (& amp;) og pseudo-elementer (før / efter)
& amp;
& amp; :: før,
& amp; :: efter {
  position: absolut;
  TOP: 0;
  Venstre: 0;
  Bredde: 100%;
  Højde: 100%;
  Display: Flex; // Brug flex til justering
  retfærdiggøre-indhold: center; // Horisontal justering
  Juster-elementer: Center; // lodret justering
}
& amp; :: før,
& amp; :: efter {
  Indhold: Attre (dataindhold); // Brug attributværdien som indholdet
}
}

Resultatet i browseren skal se identisk, fordi pseudo-elementerne sidder direkte oven på teksten. Du kan ændre deres stilarter i Devtools. at se, hvordan de er lagdelt.

03. Sæt baggrunde og farver

Tid til at give hvert lag en anden farve og baggrund - lad os gå til nogle fed, on-trend, neonfarver, som vi har foruddefineret som variabler. Vi kan også tvinge teksten til at pakke på flere linjer ved hjælp af et CSS polstring trick i stedet for at tilføje disse i HTML.

Dette er nyttigt, da vi ellers skulle bruge to forskellige typer linjeskift: & lt; BR & GT; inde i & lt; div & gt; og jo mere uklare \EN i attributten.

 .clip {
...
& amp;
& amp; :: før,
& amp; :: efter {
  Padding: 0 50%;
  Boksestørrelse: Border-boks;
}
& amp; :: før {
  Farve: $ Hvid;
  Baggrund: $ Pink;
}
& amp; :: efter {
  Farve: $ Pink;
  Baggrund: $ Blue;
}
}

Padding Trick virker ved at give teksten nul horisontal bredde og tvinge browseren til at pakke hvert ord til en ny linje.

04. Klip teksten

Tid til den interessante bit - vi er klar til at begynde at klippe vores tekst. Vi skal skabe et diagonalt klip, skære skærmen i to trekanter fra bunden til venstre til højre.

Det ::Før Pseudo-element vil kun være synlige i den øverste venstre trekant, og ::efter Pseudo-elementet vil kun være synligt i den nederste højre trekant. Her er koden for at opnå det:

 .clip {
...
& amp; :: før {
  Clip-sti: Polygon (0 0, 100% 0, 0 100%, 0 100%);
}
& amp; :: efter {
  Klipsti: Polygon (100% 0, 100% 100%, 0 100%, 100% 0);
}
}

Dette skaber polygoner med fire point. Hvert punkt er beskrevet af et koordinatpar; simpelthen en x (venstre til højre) og y (top til bund) værdi. Værdien kan være absolut (for eksempel: PX) eller relativ (for eksempel:%). Punkterne henvises til øverst til venstre, så punkterne på 100% 100% er i bunden til højre.

Forestil dig linjer, der forbinder hvert af punkterne i den rækkefølge, de er opført for at danne formerne. I ::Før Polygon det starter øverst til venstre (0 0) , bevæger sig over skærmen øverst til højre (100% 0) , og derefter ned til nederste venstre (0 100%) .

Forhåbentlig vil du se din klipede tekst nu. Ændre størrelsen på browseren, og du vil se klipningsreaktionen i overensstemmelse hermed.

Hvis du bruger Chrome, vil du sandsynligvis se nogle gentagne problemer, mens du ændres, forårsaget af Chrome's Composite Layers. Desværre, fordi demoen er fuldskærm, den anbefalede Will-Change: Transform ejendom og. Transform: TranslateZ (0) Hack riller ikke dette. Men hvis du skifter .clip. til Position: Fast; det virker.

 klip {
& amp;
& amp; :: før,
& amp; :: efter {
  Position: Fast;
}
}

Husk, at Chrome forsøger at være nyttigt, og denne løsning vil have indflydelse på ydeevnen. Sørg for at profilere ydeevne, når du gør ting som dette i produktionen.

05. Tilføj overgange

Nu hvor vi har vores klippede tekst, lad os bringe det til liv med nogle overgange. Den gode nyhed er, at du simpelthen kan overgå Clip-Path. ejendom, så browseren gør alt det hårde arbejde. Lad os aktivere overgange på pseudo-elementerne, og derefter definere fire forskellige tilstande til overgang mellem.

Stat 1: Dette er den oprindelige tilstand, så lad os skabe tre andre

Tilføj hver blok nederst på din CSS, mens du går, så du kan se, hvordan det ser ud.

Stat 2: Flyt trianglerne fra hinanden lidt for at afsløre baggrunden

Dette vil se lidt ud som Republikken Congo flag. Fjernelse af 20 procent fra spidsen af hver polygon trekant vil gøre tricket.

Stat 3: Morph trekanterne i rektangler

Dette ligner den franske tricolor, i omvendt.

Hvad med det fjerde co-ordinate par? Nå, det er her det kommer i nyttige. Det viser sig at overføre Clip-Path. Kun virker, hvis den anvendte formfunktion er den samme (så polygon og GT; polygon), og antallet af anvendte punkter er det samme - browseren overgår hvert enkelt punkt. Derfor har vi det fjerde skjulte punkt - det giver os mulighed for problemfrit overgang fra en trekant til et rektangel, vi afslører bare det fjerde punkt, når vi har brug for det.

 .clip {
& amp; :: før {
  Clip-sti: Polygon (0 0, 40% 0, 40% 100%, 0 100%);
}
& amp; :: efter {
  Klipsti: Polygon (100% 0, 100% 100%, 60% 100%, 60% 0);
}
}

Stat 4: Drej disse polygoner

Sticking til vores flag tema, dette ville ligne 'jeg kræver en slæbebåd' i verden af maritime flag signalering.

Her vrider vi polygonerne, så de krydser i centrum og danner to trekanter hver. Dette er, når overgange kan hjælpe dig med at forstå de koordinatpar. Ved virkelig at bremse overgangen kan du se, hvordan hvert punkt bevæger sig over skærmen til sin nye position, og du begynder at forstå, hvordan bestilling af parene påvirker overgangen. Det giver dig faktisk en masse kontrol over overgangen.

 .clip {
& amp; :: før {
  Klipsti: Polygon (100% 0, 0 0, 100% 100%, 0 100%);
}
& amp; :: efter {
  Klipsti: Polygon (100% 0, 100% 100%, 0 0, 0 100%);
}
}

Wrap up.

Vi er alle sæt, men vi er endnu ikke i stand til at ændre staterne, hvilket betyder, at du ikke kan se overgangene i aktion. Der er mange måder at opnå dette på, så det er op til dig. I repo og codeepen har jeg brugt en 100 procent javascript-fri løsning med skjulte radioknapper og den generelle søskende vælger - kigge. Du kan også tjekke denne tutorials codeepen her .

Denne artikel optrådte oprindeligt i udstedelse 298 af net , magasinet til professionelle webdesignere og udviklere - tilbyder de nyeste nye webtendenser, teknologier og teknikker. Køb problem 298 her eller Abonner på nettet her .

Særligt juletilbud: Spar op til 47% på et abonnement på netto for dig eller en ven til jul. Det er et begrænset tilbud, så bevæg hurtigt ...

Relaterede artikler:

28 Fremragende eksempler på CSS
Sådan oprettes et pyramidlayout med CSS-former
CSS-tricks til at revolutionere dine web layouts

Sådan skaber du fantastiske effekter med CSS-former

01. Begynd med HTML

02. Tilføj lidt stil

03. Sæt baggrunde og farver

04. Klip teksten

05. Tilføj overgange

Wrap up.

hvordan - Mest populære artikler

Sådan laver du et logo i Photoshop

Sådan oprettes tilgængelige webformularer

Forstå Unity Asset import pipeline

Sådan bringer du en 2D-tegn til liv i VR

Opret fantastiske landskaber i Houdini

Opret et lavt poly tapet i C4D

Sådan bruges stockfotografering kreativt inden for dit designarbejde

Udforsk kreativ kode med p5.js

Kategorier