Gineadóir clip-path

Conas an gineadóir clip-path a úsáid

1. Roghnaigh Cruth: Polagán, Ciorcal, Eilips nó Inset. Taispeánann an chiseal fholmhaithe an eilimint iomlán, taispeánann an ceann geal an méid a fhanann infheicthe tar éis an ghearrtha.
2. Tarraing na poncanna san eagarthóir. I gcás polagáin, is cúinne é gach ponc; cliceáil in áit ar bith sa limistéar chun pointe a chur leis ar an imeall is gaire. I gcás ciorcail nó eilipse, tarraing an lár agus na poncanna gathanna. I gcás inset, tarraing na ceithre phonc imill.
3. Mionathraigh sna réimsí thíos: liosta Poncanna (X agus Y i gcéatadán, le Bain agus Cuir pointe leis) do pholagáin, nó na réimsí Gath, Lár X, Lár Y, Barr, Deas, Bun, Clé agus Cúinní cruinne (px) do na cruthanna eile.
4. Tosaigh níos tapúla leis na Réamhshocruithe: triantán, traipéisiam, comhthreomharán, rombas, cúigeán, séagón, ochtagán, bevel, réalta, cros, saigheada, seabhrón, bolgán cainte, ciorcal, eilips agus inset.
5. Tic Greamaigh le 5 % le haghaidh luachanna néata, agus Cuir -webkit-clip-path leis (Safari sean) má thacaíonn tú fós le Safari 13.0 nó níos sine.
6. Más mian leat, scaoil grianghraf isteach in Íomhá chúlra (roghnach) chun an cruth a fheiceáil ar d’íomhá féin. Ní uaslódáiltear an comhad riamh.
7. Cóipeáil an Cód CSS leis an gcnaipe Cóipeáil.

Méarchlár: fócasaigh ponc, bog é leis na heochracha saighde (1 %, nó 10 % le Shift) agus brúigh Delete chun pointe polagáin a bhaint. Coimeádann polagán trí phointe ar a laghad.

Feidhmeanna cruth clip-path

Folaíonn clip-path gach rud lasmuigh de chruth. Coimeádann an eilimint a méid sa leagan amach; ní ghearrtar ach an phéintéireacht agus an limistéar inchliceáilte.

• polygon(x1 y1, x2 y2, …) nascann na poncanna in ord agus dúnann an cruth. Is triantán ag pointeáil suas é polygon(50% 0%, 100% 100%, 0% 100%). Tosaíonn comhordanáidí ag cúinne barr clé na heiliminte.
• circle(r at cx cy): is é circle(50% at 50% 50%) an ciorcal is mó atá lárnaithe san eilimint. Tá gath céatadáin coibhneasta le trasnán na heiliminte roinnte ar √2, mar sin ní hionann é agus sciar den leithead ach amháin d’eilimintí cearnacha.
• ellipse(rx ry at cx cy): is sciar den leithead é an gath cothrománach, sciar den airde é an gath ingearach.
• inset(top right bottom left round radius) gearrann dronuilleog taobh istigh de na himill, leis an ghearrchomhréir chéanna de luach amháin go ceithre luach is atá ag corrlaigh agus cúinní cruinne roghnacha.

Scríobhann an uirlis seo céatadáin, mar sin scálaíonn an cruth leis an eilimint cibé méid atá inti.

Leideanna le haghaidh cruthanna maithe

• Is tábhachtach ord na bpointí polagáin: má théann tú timpeall an imill ar deiseal (nó tuathal) seachnaítear cruthanna crosta “bogha-tae”.
• Is féidir dhá chruth leis an líon céanna pointí a bheochan: déanann transition: clip-path 0.4s séagón a mhorfáil go séagón eile go réidh. Ní féidir leis an mbrabhsálaí idirshuíomh a dhéanamh idir polagáin le líon éagsúil pointí.
• Gearrann clip-path box-shadow agus imill freisin. Chun scáth a thabhairt do chruth gearrtha, cuir filter: drop-shadow() ar eilimint thuismitheora.
• Ní fhaigheann limistéir ghearrtha cliceálacha ná hover, rud atá áisiúil le haghaidh cnaipí neamhrialta.