Klipp-sökväg - CSS-tricks

Innehållsförteckning

Den clip-pathegendom i CSS kan du ange en specifik region av ett element till display, med resten döljs (eller ”klippt”) bort.

.clip-me ( /* Example: clip away the element from the top, right, bottom, and left edges */ clip-path: inset(10px 20px 30px 40px); /* or "none" */ /* Example: clip element into a Heptagon */ clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); /* Deprecated version */ position: absolute; /* absolute or fixed positioning required */ clip: rect(110px, 160px, 170px, 60px); /* or "auto" */ /* values descript a top/left point and bottom/right point */ )

Det fanns en clipegendom, men notera att den är utfasad.

Det vanligaste användningsfallet skulle vara en bild, men det är inte begränsat till det. Du kan lika gärna använda clip-pathen stycke-tagg och bara en del av texten.

 

 I'll be clipped.

Dessa fyra värden i inset()(i CSS ovan) representerar topp / vänster punkt och botten / höger punkt, som bildar den synliga rektangeln. Allt utanför den rektangeln är dolt.

Denna bild av Louis Lazaris förklarar de fyra punkterna i den gamla clip: rect();syntaxen mycket bra.

Andra möjliga värden:

.clip-me ( /* referencing path from an inline SVG */ clip-path: url(#c1); /* referencing path from external SVG */ clip-path: url(path.svg#c1); /* polygon */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* circle */ clip-path: circle(30px at 35px 35px); /* ellipse */ clip-path: ellipse(65px 30px at 125px 40px); /* inset-rectangle() may replace inset() ? */ /* rectangle() coming in SVG 2 */ /* rounded corners… not sure if a thing anymore */ clip-path: inset(10% 10% 10% 10% round 20%, 20%); )

Exempel på SVG-klippväg:

Det är väldigt konstigt som clip-pathinte stödde path()funktionen utanför porten, eftersom det path()redan är en sak för egenskaper som motion-path. Firefox har dock stöd för det nu, och vi väntar på resten av webbläsarna. Se En första implementering av klippspår: sökväg ();

Gör din egen

Tills vi kan använda på ett tillförlitligt sätt path()är de mest användbara klippen för snygga anpassade former polygon(). Här är en riktigt snygg redaktör för de från Mads Stoumann (som också fungerar för cirklar och ellipser):

Mer information

  • Klippning och maskering i CSS
  • klippbana på WPD
  • klippspår på MDN
  • Clippy: Bennett Feelys klippspårtillverkare
  • Klippning och maskering på MDN
  • (Föråldrad) CSS-klippegenskap (imponerande webbplatser)
  • Specifikation för CSS-maskering
  • CSS Masking av Dirk Schulze
  • Klippning i CSS och SVG - Clip-path Property and Element av Sara Soueidan
  • Pennor taggade clip-path på CodePen
  • Demos och webbläsare stöder demo Pen från Yoksel
  • SVG-masker av Jakob Jenkov
  • Alan Greenblatts forskning om webbläsarstödnivåer för klipp- och maskeringsfunktioner

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
91 54 Nej 88 TP *

Mobil / surfplatta

Android Chrome Android Firefox Android iOS Safari
88 85 81 14,0-14,4 *

Intressanta artiklar...