Clip-Path Generator

Paano gamitin ang clip-path generator

1. Pumili ng Hugis: Polygon, Bilog, Ellipse o Inset. Ang malabong layer ay nagpapakita ng buong element, at ang maliwanag naman ang nananatiling nakikita pagkatapos ng clipping.
2. I-drag ang mga tuldok sa editor. Sa polygon, bawat tuldok ay isang sulok; i-click ang kahit saan sa area para magdagdag ng punto sa pinakamalapit na gilid. Sa bilog o ellipse, i-drag ang gitna at ang mga tuldok ng radius. Sa inset, i-drag ang apat na tuldok sa gilid.
3. Mag-fine-tune sa mga field sa ibaba: ang listahan ng Mga punto (X at Y sa porsyento, may Alisin at Magdagdag ng punto) para sa polygon, o ang mga field na Radius, Gitna X, Gitna Y, Itaas, Kanan, Ibaba, Kaliwa at Mga bilugang sulok (px) para sa ibang hugis.
4. Magsimula nang mabilis gamit ang Mga preset: tatsulok, trapezoid, parallelogram, rhombus, pentagon, hexagon, octagon, bevel, bituin, krus, mga palaso, chevron, speech bubble, bilog, ellipse at inset.
5. Lagyan ng tsek ang I-snap sa 5 % para sa maayos na mga halaga, at ang Idagdag ang -webkit-clip-path (lumang Safari) kung sinusuportahan mo pa ang Safari 13.0 o mas luma.
6. Opsyonal, mag-drop ng litrato sa Background na larawan (opsyonal) para makita ang hugis sa sarili mong larawan. Hindi kailanman ina-upload ang file.
7. Kopyahin ang CSS code gamit ang Kopyahin.

Keyboard: i-focus ang isang tuldok, ilipat ito gamit ang mga arrow key (1 %, o 10 % kapag may Shift) at pindutin ang Delete para alisin ang punto ng polygon. Laging may kahit tatlong punto ang polygon.

Gumagana ito sa iyong browser. Walang ini-type mo na ipinapadala sa server.

Ang mga shape function ng clip-path

Itinatago ng clip-path ang lahat ng nasa labas ng isang hugis. Nananatili ang laki ng element sa layout; ang pagpipinta at ang area na puwedeng i-click lang ang na-clip.

• polygon(x1 y1, x2 y2, …) ay nagdudugtong ng mga punto ayon sa ayos at isinasara ang hugis. Ang polygon(50% 0%, 100% 100%, 0% 100%) ay tatsulok na nakaturo pataas. Nagsisimula ang mga coordinate sa itaas na kaliwang sulok ng element.
• circle(r at cx cy): ang circle(50% at 50% 50%) ang pinakamalaking bilog na nasa gitna ng element. Ang percentage na radius ay nakabatay sa diagonal ng element na hinati sa √2, kaya katumbas lang ito ng bahagi ng lapad sa mga parisukat na element.
• ellipse(rx ry at cx cy): ang pahalang na radius ay bahagi ng lapad, ang patayo ay bahagi ng taas.
• inset(top right bottom left round radius) ay naghihiwa ng parihaba sa loob ng mga gilid, na may parehong shorthand na isa hanggang apat na halaga gaya ng margin at opsyonal na bilugang sulok.

Porsyento ang isinusulat ng tool na ito, kaya sumasabay sa laki ng element ang hugis anuman ito.

Mga tip para sa magagandang hugis

• Mahalaga ang ayos ng mga punto ng polygon: kapag umiikot ka sa gilid nang pa-clockwise (o pa-counter-clockwise), naiiwasan ang mga nagkrus na “bow-tie” na hugis.
• Maaaring i-animate ang dalawang hugis na pareho ang bilang ng punto: ang transition: clip-path 0.4s ay maayos na ginagawang ibang hexagon ang isang hexagon. Hindi kayang i-interpolate ng browser ang mga polygon na magkaiba ang bilang ng punto.
• Kinaklip din ng clip-path ang box-shadow at mga border. Para lagyan ng anino ang na-clip na hugis, maglagay ng filter: drop-shadow() sa parent element.
• Ang mga na-clip na bahagi ay hindi tumatanggap ng click o hover, na madaling gamitin sa mga button na hindi pantay ang hugis.