CSS Clip-Path -generaattori

Tämä työkalu luo CSS clip-path -arvon muotomallista — ympyrä, ellipsi, kolmio, viisikulmio, kuusikulmio, tähti tai pyöristetty suorakulmio — ja näyttää leikatun muodon elävästi esikatselulaatikossa ennen CSS:n kopiointia. Yleisten muotojen polygon()-koordinaatteja ei tarvitse laskea käsin.

Mikä tämä työkalu on?

clip-path on CSS-ominaisuus, joka piilottaa kaiken elementin määritellyn alueen ulkopuolella jättäen näkyviin vain muodon sisäpuolen — elementin loppuosa on yhä olemassa asettelussa, sitä vain ei piirretä. Se hyväksyy perusmuotofunktioita kuten circle(), ellipse(), inset() ja polygon(), joista viimeinen ottaa mielivaltaisen listan x/y-koordinaattipareja minkä tahansa suoraviivaisen muodon määrittämiseksi.

polygon()-koordinaatit ovat vaikein osa kirjoittaa käsin — viisikulmio, kuusikulmio tai tähti tarvitsee kukin useita tarkasti sijoitettuja pisteitä, ja yhden virheellisyys vääristää koko muodon. Tämä työkalu laskee nuo koordinaatit puolestasi muotomallista, päivittää live-esikatselun välittömästi, ja antaa sinulle tarkan clip-path-CSS:n kopioitavaksi.

Lähde: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — spesifikaatiot, jotka määrittelevät clip-pathin ja sen perusmuotofunktiot.

Miksi käyttää sitä?

Live-esikatselu leikkaa oikean esikatselulaatikon valittuun muotoon, joten näet todellisen tuloksen sen sijaan, että kuvittelisit sen koordinaateista.
Seitsemän muotomallia — ympyrä, ellipsi, kolmio, viisikulmio, kuusikulmio, tähti ja pyöristetty suorakulmio — kattavat valtaosan clip-path-käyttötapauksista ilman käsin kirjoitettuja polygon-pisteitä.
Ympyrä-, ellipsi- ja pyöristetty-suorakulmio-mallit sisältävät koko-/pyöristysliukusäätimen, jotta voit hienosäätää muotoa muokkaamatta koordinaatteja.
Tulostaa standardin clip-path-CSS:n, joka on valmis liitettäväksi mihin tahansa elementtiin.
Toimii kokonaan selaimessasi — mitään määrittämääsi ei ladata minnekään. Ilmainen, ei rekisteröitymistä, toimii mobiilissa.

Käyttöohje

Valitse muoto pudotusvalikosta — ympyrä, ellipsi, kolmio, viisikulmio, kuusikulmio, tähti tai pyöristetty suorakulmio.
Ympyrä-, ellipsi- ja pyöristetty-suorakulmio-muodoille säädä koko-/pyöristysliukusäädintä hienosäätääksesi leikkausta.
Katso esikatselulaatikon päivittyvän elävästi muotoa tai liukusäädintä muuttaessasi.
Kopioi luotu clip-path-CSS ja liitä se elementtiin, jonka haluat leikata.
Kuvaa varten kiinteän värin sijaan käytä samaa clip-path-ominaisuutta <img>-elementtiin tai elementtiin, jolla on background-image.

Esimerkki

Syöte

Muoto: Kuusikulmio

Tuloste

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Säännöllinen kuusikulmioleikkaus, jota käytetään yleisesti merkkityylisissä profiilikuvissa tai ominaisuuskuvakkeissa.

Perusmuodot vs. polygon()

Ympyrä, ellipsi ja inset (pyöristetty suorakulmio) ovat sisäänrakennettuja CSS-perusmuotofunktioita, joilla on oma yksinkertainen syntaksinsa — säde tai kaksi, plus valinnainen keskikohta tai kulmien pyöristys. Kolmio, viisikulmio, kuusikulmio ja tähti eivät ole sisäänrakennettuja muotoja; ne kaikki ilmaistaan polygon()-funktiolla, tasaisella listalla x/y-koordinaattipareja, jotka jäljittävät muodon ääriviivat. Tämä työkalu laskee nuo koordinaatit automaattisesti säännöllisille (tasavälein sijoitetuille) monikulmioille ja viisisakaraiselle tähdelle, mikä on käsin oikein saatuna työläin osa.

Yleisiä clip-path-kuvioita

Pyöreä avatar tai merkki: circle() keskisuurella säteellä, usein yhdistettynä neliönmuotoiseen lähdekuvaan, jotta ympyrä ei venyisi ellipsiksi.
Vinottain kulkeva osioerotin: mukautettu monikulmio (ei sisälly malleihin tässä), joka vinottaa täysleveän osion ylä- tai alareunaa muuta kuin suorakulmaista sivutaukoa varten.
Tähtiarviointikuvake tai -merkki: tähtimalli, hyödyllinen koristeellisena muotona käsin piirretyn SVG:n sijaan yksinkertaisissa tapauksissa.
Kuusikulmiokuvaruudukko: kuusikulmioleikatut kuvat hunajakennoasettelussa, yleinen portfolio-/tiimisivukuvio.
Pyöristetty suorakulmio kevyenä vaihtoehtona border-radiukselle, kun leikkauksen pitää myös katkaista ylivuotava lapsisisältö, koska pelkkä border-radius ei leikkaa lapsia ilman lisäksi asetettua overflow:hidden-arvoa.

Yhdistäminen muihin CSS-työkaluihin

clip-path yhdistetään usein CSS-liukuväriin leikattavana taustana, tai box-shadow-arvoon, joka on sovellettu kääreelementtiin (koska clip-path leikkaa myös elementin oman varjon, kääreelementin varjo on tavanomainen kiertotapa leikatulle muodolle, jonka pitää silti näyttää kelluvan).

→ CSS-liukuvärigeneraattori · Border Radius -generaattori · Box Shadow -generaattori

Usein kysytyt kysymykset

Vaikuttaako clip-path elementin asettelukokoon?

Ei — elementti säilyttää alkuperäisen laatikkokokonsa ja sijaintinsa asettelutarkoituksiin; clip-path muuttaa vain sitä, mitä piirretään. Ympäröivät elementit asetellaan ikään kuin leikkausta ei olisi sovellettu, mikä voi yllättää, jos odotat leikatun muodon käyttäytyvän kuin uudelleenkoottu elementti.

Miksi box-shadow ei näy leikatussa muodossani?

clip-path leikkaa koko elementin renderöinnin, mukaan lukien sen luoman varjon, joten ympyrä- tai monikulmioleikatun elementin oma box-shadow leikkautuu pois leikkausrajalla. Saadaksesi varjon, joka seuraa näkyvää muotoa, käytä box-shadowta leikkaamattomaan kääreelementtiin leikatun elementin ympärillä.

Voinko animoida tai siirtymöidä clip-path-muotoa?

Kyllä, mutta vain kahden samaa tyyppiä olevan ja saman määrän pisteitä sisältävän clip-path-arvon välillä — esimerkiksi yksi 6 pisteen polygon() siirtyy toiseen 6 pisteen polygon()-arvoon. Perustavanlaatuisesti erilaisten muotojen (circle() polygon()-arvoon) välinen siirtymä ei yleensä animoidu sulavasti eri selaimissa.

Voiko clip-pathia käyttää taustakuviin, ei vain elementin sisältöön?

clip-path leikkaa koko elementin — mukaan lukien sen background-image-, background-color-, reunus- ja sisältöominaisuudet yhdessä — pikemminkin kuin taustan erikseen. Jos haluat leikata vain taustakuvan pitäen muun sisällön leikkaamattomana, käytä clip-pathia erilliseen elementtiin, joka pitää vain taustan.

Tukevatko kaikki modernit selaimet clip-pathia?

Kyllä — clip-path perusmuotofunktioilla (circle, ellipse, inset, polygon) on ollut laajasti saatavilla (Baseline) suurimmissa selaimissa tammikuusta 2020 alkaen, MDN:n yhteensopivuustietojen mukaan. Sitä on yleisesti turvallista käyttää tuotannossa ilman varajärjestelyä nykyisille selainversioille.