Leikepolku - CSS-temppuja

clip-pathOmaisuus CSS voit määrittää tietyn alueen elementin näyttö, ja loput se piilotettu (eli ”leikattu”) pois.

.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 */ ) 

Aikaisemmin oli clipominaisuus, mutta huomaa, että se on vanhentunut.

Yleisin käyttötapa olisi kuva, mutta se ei rajoitu siihen. Voit yhtä helposti soveltaa clip-pathkappaletagiin ja vain osaan tekstiä.

 
 I'll be clipped.

Nämä neljä arvoa inset()(yllä olevassa CSS: ssä) edustavat ylempää / vasenta pistettä ja ala / oikea pistettä, jotka muodostavat näkyvän suorakulmion. Kaikki suorakulmion ulkopuolella on piilotettu.

Muut mahdolliset arvot:

.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%); )

Esimerkki SVG-leikkeen polusta:

On hyvin outoa, että clip-pathse ei tue path()toimintoa ulos portista, koska se path()on jo asia sellaisille ominaisuuksille kuin motion-path. Firefoxilla on kuitenkin nyt tuki sille, ja odotamme muita selaimia. Katso kohtaa Clip-path: Initial Implementation of clip-path: path ();

Tee oma

Kunnes voimme luotettavasti käyttää path(), hyödyllisimmät leikkeet hienojen mukautettujen muotojen suhteen ovat polygon(). Tässä on todella siisti editori Mads Stoumannille (joka toimii myös ympyröille ja ellipsille):

Lisää tietoa

• Leikkaaminen ja peittäminen CSS: ssä
• leikepolku WPD: llä
• leikepolku MDN: ssä
• Clippy: Bennett Feelyn leikepolun tekijä
• Leikkaaminen ja peittäminen MDN: llä
• (Vanhentunut) CSS-leikkeen ominaisuus (vaikuttavat verkot)
• CSS-peittämisen tiedot
• Dirk Schulzen CSS-naamiointi
• CSS: n ja SVG: n leikkaus - Sara Soueidanin leikepolku Property and Element
• Kynät, jotka on merkitty leikepolulle CodePenissä
• Demot ja selaimet tukevat Yokselin esittelykynää
• Jakob Jenkovin SVG-naamiot
• Alan Greenblattin tutkimus selaimen tukitasoista leikkaus- ja peittämistoiminnoille

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi	Firefox	IE	Reuna	Safari
91	54	Ei	88	TP *

Matkapuhelin / tabletti

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