CSS Clip-Path Generator

CSS-leikepolku hyväksyy polygon()-funktion, joka koostuu mistä tahansa määrästä x/y-koordinaattipareja, mikä tarkoittaa, että se voi veistää laatikon muotoihin, jotka ovat kaukana yksinkertaisista suorakulmioista ja ympyröistä, joita useimmat ihmiset tavoittavat. Saavute on siinä, että näiden koordinaattien kirjoittaminen käsin on työlästä ja lähes mahdotonta saada oikein mihinkään peruskolmion lisäksi – tämä generaattori muuttaa koordinaattiluettelon joukoksi vedettäviä pisteitä live-esikatselussa, joten näkemäsi muoto on aina CSS:n tuottama muoto.

Jokainen esikatselun piste tallennetaan prosenttiosuutena laatikon leveydestä ja korkeudesta, mikä on täsmälleen miten clip-path: polygon() toimii itse konepellin alla: tällä tavalla rakennettu muoto pitää mittasuhteensa oikein riippumatta siitä, mihin kokoon elementti päätyy oikealle sivulle, pienestä kuvakemaskista koko leveään sankaribanneriin. Vedä mitä tahansa pistettä muokataksesi ääriviivaa, napsauta lähellä reunaa lisätäksesi uuden pisteen täsmälleen napsauttamasi kohtaan tai kaksoisnapsauta olemassa olevaa pistettä poistaaksesi sen – editori säilyttää aina vähintään kolme pistettä, koska monikulmio ei voi olla olemassa vähemmällä.

Kuusi niputettua esiasetusta on valittu osoittamaan, että leikkauspolku voi tehdä enemmän kuin kuperat muodot: tähti ja nuoli ovat molemmat riippuvaisia sisäänpäin osoittavista heijastuskulmista, puhekupla leikkaa kolmiomaisen hännän muutoin tavallisesta suorakulmiosta ja lipun tynkä painaa kaksi pykälää vastakkaisiin reunoihin, kuten todellinen rei'itetty lippu näyttää. Lataa mikä tahansa esiasetus ja jatka vetämistä sieltä – mikään editorissa ei lukitse sinua aloitusmuotoon.

Lataa oma kuvasi, jotta voit esikatsella leikepolkua todellista sisältöä vasten tavallisen laatikon sijaan tai ohita lataus kokonaan, jolloin esikatselu palaa raidalliseen kuvioon, jotta leikkausmuoto pysyy selvästi näkyvissä kummassakin tapauksessa. Kuten kaikki tämän sivuston työkalut, koko homma toimii paikallisesti selaimessa: mikään kuva ei koskaan poistu laitteestasi, ja generaattori toimii offline-tilassa sivun latautumisen jälkeen.