CSS Clip-Path -generaattori
Piirrä vapaasti monikulmioita – myös koveria lovia – vetämällä pisteitä live-esikatselulaatikossa tai omassa lataamassasi kuvassa, ja kopioi tuloksena syntyvä CSS clip-path: polygon(...) -arvo.
🔒 Käsitelty kokonaan selaimessasi – mitään tähän kirjoittamaasi ei koskaan ladata.
Tulos
CSS clip-path hyväksyy polygon()-funktion, joka koostuu mistä tahansa määrästä x/y-koordinaattipareja, mikä tarkoittaa, että sillä voi leikata laatikon muotoihin, jotka ulottuvat paljon yksinkertaisia suorakulmioita ja ympyröitä pidemmälle. Hankaluus on siinä, että näiden koordinaattien kirjoittaminen käsin on työlästä ja lähes mahdotonta saada oikein minkään peruskolmion monimutkaisemman kohdalla – tämä generaattori muuttaa tuon koordinaattiluettelon vedettäviksi pisteiksi live-esikatselussa, joten näkemäsi muoto on aina se, jonka CSS tuottaa.
Jokainen esikatselun piste tallennetaan prosentteina laatikon leveydestä ja korkeudesta, mikä on juuri tapa, jolla clip-path: polygon() toimii taustalla: tällä tavoin rakennettu muoto säilyttää mittasuhteensa oikeina riippumatta siitä, minkä kokoiseksi elementti oikealla sivulla lopulta tulee, pienestä kuvakemaskista täysleveään hero-banneriin. Vedä mitä tahansa pistettä muokataksesi ääriviivoja, klikkaa läheltä reunaa lisätäksesi uuden pisteen juuri siihen kohtaan tai tuplaklikkaa olemassa olevaa pistettä poistaaksesi sen – editori pitää aina vähintään kolme pistettä, sillä monikulmio ei voi olla olemassa pienemmällä määrällä.
Kuusi sisäänrakennettua esiasetusta on valittu todistamaan, että clip-path pystyy muuhunkin kuin kuperiin muotoihin: tähti ja nuoli nojaavat molemmat sisäänpäin osoittaviin kuperttamiskulmiin, puhekupla leikkaa kolmiomaisen hännän muuten tavallisesta suorakulmiosta, ja lippuliuska painaa kaksi lovea vastakkaisiin reunoihin samalla tavalla kuin aito rei'itetty lippu näyttää. Lataa mikä tahansa esiasetus ja jatka vetämistä siitä – mikään editorissa ei lukitse sinua aloitusmuotoon.
Lataa oma kuvasi esikatsellaksesi clip-pathia todellista sisältöä vasten pelkän laatikon sijaan, tai ohita lataus kokonaan, jolloin esikatselu käyttää raidallista kuviota, jotta leikattu muoto pysyy selkeästi näkyvissä kummassakin tapauksessa. Kuten kaikki tämän sivuston työkalut, koko juttu toimii paikallisesti selaimessa: mikään kuva ei koskaan poistu laitteeltasi, ja generaattori jatkaa toimintaansa offline-tilassa, kun sivu on kerran ladattu.