CSS clip-path -generaattori

CSS Clip-Path -generaattori on visuaalinen työkalu CSS clip-path -ominaisuuksien luomiseen ja testaamiseen. Clip-path antaa sinun leikata elementtejä perusmuotoihin (ympyrä, ellipsi, monikulmio) tai SVG-polkuun. Tämä työkalu tarjoaa reaaliaikaisen esikatselun ja koodigeneroinnin, mikä auttaa sinua suunnittelemaan mukautettuja muotoja verkkoprojekteihisi.

Napsauta mitä tahansa valmista muotoa olevaa painiketta Esiasetukset-paneelissa käyttääksesi sitä heti. Työkalu sisältää 12 sisäänrakennettua muotoa: Kolmio, Puolisuunnikas, Suunnikas, Viisikulmio, Kuusikulmio, Seitsämänkulmio, Kahdeksankulmio, Tähti, Ympyrä, Ellipsi, Sisäänrakennettu kehys and Pyöristetty sisäänrakennus. Esikatselu päivittyy välittömästi näyttämään, kuinka muoto leikkaa elementin.

Syötä mikä tahansa kelvollinen clip-path-arvo Mukautettu polku -syöttökenttään. Tukee kaikkia clip-path-funktioita: polygon(), circle(), ellipse(), inset() ja path(). Työkalu näyttää generoidun CSS-koodin sekä standardilla että -webkit-etuliitteillä parasta selainyhteensopivuutta varten. Napsauta Kopioi-painiketta kopioidaksesi koodin leikepöydällesi.

Monikulmio-rakentaja tarjoaa visuaalisen käyttöliittymän mukautettujen monikulmioiden luomiseen. Jokainen piste määritellään X- ja Y-koordinaateilla (0-100%). Lisää lisää pisteitä (vähintään 3) luodaksesi monimutkaisia monikulmioita tai poista pisteitä yksinkertaistamiseksi. Rakentaja luo kelvollisen CSS polygon()-syntaksin automaattisesti säätäessäsi koordinaatteja.

Mukauta esikatselua säätämällä Koko-liukusäädintä (100-400px) ja käyttämällä Värivalitsinta elementin taustavärin muuttamiseen. Nämä säädöt auttavat sinua visualisoimaan, kuinka clip-path näyttää eri elementtikokoilla ja väreillä suunnittelussasi.

CSS clip-path on tuettu kaikissa moderneissa selaimissa. Työkalu sisältää automaattisesti -webkit-clip-pathin Safari-yhteensopivuutta varten. Huom, että clip-path path()-funktiolla on rajoitettu tuki vanhemmissa selaimissa. Testaa aina kohdeselaimia ennen tuotantoon käyttöönottoa.