clip-path-generaattori
Valitse muoto, säädä sitä ja kopioi CSS. Kuvaa ei tarvita.
- Toimii selaimessasi — tekstiäsi ei lähetetä minnekään
- Ei rekisteröitymistä, ei kiintiöitä, ilmainen käyttää niin usein kuin haluat
Näin se toimii
clip-path leikkaa elementin ääriviivaksi. Mitään muodon ulkopuolella ei piirretä eikä se ole napsautettavissa, mikä tekee siitä aidon muodon eikä kuvan muodosta – ja se toimii missä tahansa elementissä, kuvat ja video mukaan lukien.
Prosentteja, ei pikseleitä
Monikulmion pisteet annetaan prosentteina elementin omasta leveydestä ja korkeudesta, joten muoto venyy elementin mukana sen sijaan, että se rikkoutuisi toisessa koossa. Se tekee siitä käyttökelpoisen responsiivisessa asettelussa.
Napsautukset seuraavat muotoa
Tämä on se osa, joka erottaa clip-pathin koristeellisesta peitteestä. Pois leikattu alue ei saa osoitintapahtumia lainkaan, joten kolmionmuotoinen painike on kolmionmuotoinen hiirelle yhtä lailla kuin silmälle.
Animointi muotojen välillä
Monikulmio voi siirtyä sulavasti toiseen monikulmioon vain, jos molemmissa on sama määrä pisteitä. Tavallinen temppu on täyttää yksinkertaisempi muoto kaksoispisteillä, jotta määrät täsmäävät – kolmio, joka on kirjoitettu neljänä pisteenä niin, että kaksi on samassa kohdassa, voi muuttua neliöksi.
-webkit--rivi
Nykyiset selaimet tarvitsevat vain etuliitteettömän ominaisuuden. Etuliitteellinen kopio on mukana, koska jotkin vanhemmat Safari-versiot vaativat sitä edelleen ja sen jättäminen ei maksa mitään.
Mitä se ei tee
Se leikkaa; se ei muuta asettelua. Ympäröivä teksti käsittelee elementtiä edelleen alkuperäisenä suorakulmionaan. Jos haluat tekstin kiertävän muodon, tarvitset shape-outsiden, jolla on sama syntaksi.
clip-path-generaattori – kysymyksiä
Pysyvätkö rajatut alueet napsautettavina?
Eivät. Muodon ulkopuolinen alue ei saa osoitintapahtumia, mikä on yleensä juuri sitä, mitä haluat.
Voinko animoida clip-pathia?
Kyllä, monikulmioiden välillä, joissa on sama määrä pisteitä. Täytä yksinkertaisempi muoto kaksoispisteillä, jotta määrät täsmäävät.
Kiertääkö teksti muodon?
Ei. clip-path vain rajaa. Tekstin kierrättämiseen käytetään shape-outsidea.
Tarvitaanko -webkit--etuliitettä?
Vain vanhemmassa Safarissa. Jokainen nykyinen selain tukee etuliitteetöntä ominaisuutta.
Voinko käyttää sitä kuvassa tai videossa?
Kyllä, missä tahansa elementissä.