CSS Clip-Path Rafall

Þetta verkfæri býr til CSS clip-path gildi út frá forstilltri lögun — hring, sporbaug, þríhyrningi, fimmhyrningi, sexhyrningi, stjörnu, eða ávölum rétthyrningi — og sýnir klipptu lögunina í rauntíma á forsýningarkassa áður en þú afritar CSS-kóðann. Engin þörf á að reikna polygon() hnit handvirkt fyrir algengar lögun.

Hvað er þetta verkfæri?

clip-path er CSS-eiginleiki sem felur allt utan skilgreinds svæðis stakis, þannig að aðeins lögunin innan sést — restin af kassa staksins er samt til staðar í uppsetningunni, hún er einfaldlega ekki teiknuð. Eiginleikinn tekur við grunnlögunarföllum eins og circle(), ellipse(), inset() og polygon(), en það síðastnefnda tekur við handahófskenndum lista af x/y hnitapörum til að skilgreina hvaða beinjaðra lögun sem er.

polygon() hnit eru erfiðasti hlutinn til að skrifa handvirkt — fimmhyrningur, sexhyrningur eða stjarna þarf hvert um sig nokkra nákvæmlega staðsetta punkta, og ein röng staðsetning skekkir alla lögunina. Þetta verkfæri reiknar þessi hnit fyrir þig út frá forstilltri lögun, uppfærir rauntímaforsýnina samstundis og gefur þér nákvæman clip-path CSS-kóða til að afrita.

Heimild: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — staðlarnir sem skilgreina clip-path og grunnlögunarföll þess.

Af hverju að nota það?

Rauntímaforsýn klippir raunverulegan forsýningarkassa eftir völdu lögunni, svo þú sérð raunverulega útkomu í stað þess að ímynda þér hana út frá hnitum.
Sjö forstilltar lögun — hringur, sporbaugur, þríhyrningur, fimmhyrningur, sexhyrningur, stjarna og ávalur rétthyrningur — ná yfir langflest notkunartilvik clip-path án þess að þurfa að skrifa polygon-punkta handvirkt.
Hringur, sporbaugur og ávalur rétthyrningur eru með stærðar-/kringlunarrennu svo þú getir fínstillt lögunina án þess að breyta hnitum.
Skilar staðlaðum clip-path CSS-kóða sem er tilbúinn til að líma á hvaða stak sem er.
Keyrir alveg í vafranum þínum — ekkert sem þú stillir er sent neitt. Ókeypis, engin skráning, virkar í síma.

Hvernig á að nota það

Veldu lögun úr fellivalmyndinni — hring, sporbaug, þríhyrning, fimmhyrning, sexhyrning, stjörnu, eða ávalan rétthyrning.
Fyrir hring, sporbaug og ávalan rétthyrning, stilltu stærðar-/kringlunarrennuna til að fínstilla klippinguna.
Fylgstu með forsýningarkassanum uppfærast í rauntíma þegar þú breytir lögun eða rennu.
Afritaðu clip-path CSS-kóðann sem myndast og límdu hann á stakið sem þú vilt klippa.
Fyrir mynd í stað flatar litar, notaðu sama clip-path eiginleikann á <img> stak eða stak með background-image.

Dæmi

Inntak

Lögun: Sexhyrningur

Úttak

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%);

Regluleg sexhyrningsklipping, oft notuð fyrir merkis-stílaðar prófílmyndir eða eiginleikatákn.

Grunnlögun á móti polygon()

Hringur, sporbaugur og inset (ávalur rétthyrningur) eru innbyggð grunnlögunarföll í CSS með sinni eigin einföldu setningafræði — geisla eða tvo, auk valfrjálsrar miðjustöðu eða hornkringlunar. Þríhyrningur, fimmhyrningur, sexhyrningur og stjarna eru ekki innbyggðar lögun; þær eru allar tjáðar með polygon(), flötum lista af x/y hnitapörum sem rekja útlínur lögunarinnar. Þetta verkfæri reiknar þessi hnit sjálfkrafa fyrir regluleg (jafndreifð) marghyrninga og fimmarma stjörnu, sem er sá hluti sem er þreytandi að fá réttan handvirkt.

Algeng clip-path mynstur

Hringlaga prófílmynd eða merki: circle() með miðlungs geisla, oft ásamt ferkantaðri upprunamynd svo hringurinn teygist ekki í sporbaug.
Skáhallandi kaflaskil: sérsniðinn marghyrningur (ekki innifalinn sem forstilling hér) sem hallar efri eða neðri brún kafla í fullri breidd fyrir ekki-rétthyrnda síðuskil.
Stjörnueinkunnartákn eða merkislögun: stjörnuforstillingin, gagnleg sem skrautlögun frekar en handteiknuð SVG í einföldum tilvikum.
Sexhyrnt myndanet: myndir klipptar í sexhyrninga raðaðar í hunangsseimsuppsetningu, algengt mynstur á eignasafns-/teymissíðum.
Ávalur rétthyrningur sem léttur valkostur við border-radius þegar klippingin þarf líka að skera af yfirflæðandi undirefni, þar sem border-radius eitt og sér klippir ekki undirefni án viðbótar overflow:hidden.

Notkun með öðrum CSS-verkfærum

clip-path er oft notað ásamt CSS-litstigli sem bakgrunni sem er klipptur, eða með box-shadow á umlykjandi staki (þar sem clip-path klippir líka skugga staksins sjálfs, er skuggi á foreldrastaki venjuleg lausn fyrir klippta lögun sem á samt að virðast svífa).

→ CSS Gradient Generator · Border Radius Generator · Box Shadow Generator

Algengar spurningar

Hefur clip-path áhrif á uppsetningarstærð staksins?

Nei — stakið heldur upprunalegri kassastærð og staðsetningu fyrir uppsetningu; clip-path breytir aðeins því sem er teiknað. Umlykjandi stök eru sett upp eins og klippingin hafi ekki verið notuð, sem getur komið á óvart ef þú áttir von á að klippta lögunin hegði sér eins og stak sem hefur verið stærðarbreytt.

Af hverju sést box-shadow ekki á klipptu lögunni minni?

clip-path klippir alla teiknun staksins, þar á meðal hvern þann skugga sem það varpar, svo box-shadow staks sem er klippt með hring eða marghyrningi sker á klippingamörkunum. Til að fá skugga sem fylgir sýnilegu lögunni skaltu setja box-shadow á óklippt umlykjandi stak í kringum það klippta.

Get ég hreyft eða umbreytt clip-path lögun með hreyfingu?

Já, en aðeins milli tveggja clip-path gilda af sömu gerð og með sama fjölda punkta — til dæmis, eitt polygon() með 6 punktum sem umbreytist í annað polygon() með 6 punktum. Umbreyting milli grundvallarólíkra lögunar (circle() í polygon()) hreyfist yfirleitt ekki mjúklega yfir vafra.

Er hægt að nota clip-path á bakgrunnsmyndir, ekki bara innihald staksins?

clip-path klippir allt stakið — þar á meðal background-image, background-color, jaðra og innihald saman — frekar en bakgrunninn sérstaklega. Ef þú vilt aðeins klippa bakgrunnsmynd á meðan annað efni er óklippt, notaðu clip-path á sérstakt stak sem heldur aðeins bakgrunninum.

Er clip-path stutt í öllum nútímavöfrum?

Já — clip-path með grunnlögunarföllum (circle, ellipse, inset, polygon) hefur verið Baseline widely available í helstu vöfrum síðan í janúar 2020, samkvæmt samhæfnisgögnum MDN. Almennt er óhætt að nota það í framleiðslu án varalausnar fyrir núverandi vafraútgáfur.