Clip-path framleiðandi

Hvernig á að nota clip-path framleiðandann

1. Veldu Form: Marghyrningur, Hringur, Sporbaugur eða Inset. Daufa lagið sýnir allan þáttinn en bjarta lagið sýnir það sem er sýnilegt eftir skurðinn.
2. Dragðu punktana í ritlinum. Í marghyrningi er hver punktur eitt horn; smelltu hvar sem er á svæðinu til að bæta við punkti á næstu brún. Fyrir hring eða sporbaug dregurðu miðjuna og radíuspunktana. Fyrir inset dregurðu fjóra kantpunktana.
3. Fínstilltu í reitunum fyrir neðan: listann Punktar (X og Y í prósentum, með Fjarlægja og Bæta við punkti) fyrir marghyrninga, eða reitina Radíus, Miðja X, Miðja Y, Efst, Hægri, Neðst, Vinstri og Ávöl horn (px) fyrir hin formin.
4. Byrjaðu hraðar með Forstillingar: þríhyrningur, trapisa, samsíðungur, tígull, fimmhyrningur, sexhyrningur, áttahyrningur, skáskorið, stjarna, kross, örvar, vinkill, talblaðra, hringur, sporbaugur og inset.
5. Hakaðu í Smella á 5% fyrir snyrtileg gildi og Bæta við -webkit-clip-path (gamall Safari) ef þú styður enn Safari 13.0 eða eldri.
6. Valfrjálst geturðu sleppt mynd í Bakgrunnsmynd (valfrjálst) til að sjá formið á þinni eigin mynd. Skránni er aldrei hlaðið upp.
7. Afritaðu CSS-kóði með Afrita.

Lyklaborð: settu punkt í fókus, færðu hann með örvalyklunum (1%, eða 10% með Shift) og ýttu á Delete til að fjarlægja punkt úr marghyrningi. Marghyrningur heldur alltaf að minnsta kosti þremur punktum.

Formföllin í clip-path

clip-path felur allt utan forms. Þátturinn heldur stærð sinni í uppsetningunni; aðeins málunin og smellanlega svæðið eru skorin.

• polygon(x1 y1, x2 y2, …) tengir punktana í röð og lokar forminu. polygon(50% 0%, 100% 100%, 0% 100%) er þríhyrningur sem vísar upp. Hnit byrja í efra vinstra horni þáttarins.
• circle(r at cx cy): circle(50% at 50% 50%) er stærsti hringurinn sem er miðjaður í þættinum. Prósenturadíus miðast við hornalínu þáttarins deilda með √2, þannig að hann jafngildir hlutfalli af breiddinni aðeins fyrir ferkantaða þætti.
• ellipse(rx ry at cx cy): láréttur radíus er hlutfall af breiddinni og lóðréttur hlutfall af hæðinni.
• inset(top right bottom left round radius) sker ferhyrning innan við brúnirnar, með sömu styttingu á einu til fjórum gildum og spássíur og valfrjálsum ávölum hornum.

Þetta tól skrifar prósentur, þannig að formið skalast með þættinum hver sem stærð hans er.

Ráð fyrir góð form

• Röð punkta í marghyrningi skiptir máli: að fara réttsælis (eða rangsælis) um brúnina kemur í veg fyrir krosslögð „slaufuform“.
• Hægt er að hreyfa tvö form með jafnmörgum punktum: transition: clip-path 0.4s breytir sexhyrningi mjúklega í annan sexhyrning. Vafrinn getur ekki brúað bilið milli marghyrninga með mismunandi fjölda punkta.
• clip-path sker líka box-shadow og ramma. Til að gefa skornu formi skugga skaltu setja filter: drop-shadow() á foreldraþátt.
• Skorin svæði taka ekki við smellum eða sveimi, sem er handhægt fyrir óreglulega hnappa.