CSS Clip-Path Sura Generator

Kujenga polygon, nyota, beji, hexagon, na chevron maumbo na kisasa CSS clip-njia jiometri.

Hufanya kazi kwenye kivinjari chako. Faili zako hazitoki kamwe kwenye kifaa. Tazama jinsi ya kuthibitisha

…

Jinsi ya kufanya

  1. 1
    Hatua ya 1: fungua CSS Clip-Path Sura Generator na uweke taarifa zako

    Andika namba au maandishi yako, ongeza faili, au chagua chaguo unazohitaji. Hakuna kinachopakiwa: kila kitu kinabaki kwenye kivinjari chako.

  2. 2
    Hatua ya 2: CSS Clip-Path Sura Generator hufanya nini

    Kujenga polygon, nyota, beji, hexagon, na chevron maumbo na kisasa CSS clip-njia jiometri.

  3. 3
    Hatua ya 3: soma matokeo na ulinganishe

    Matokeo huonekana mara moja. Badilisha thamani moja uone jinsi jibu linavyobadilika, kisha ubaki na namba inayofaa kesi yako.

  4. 4
    Hatua ya 4: nakili au hifadhi

    Nakili matokeo au yapakue. Kwa uamuzi muhimu, yathibitishe kwa chanzo rasmi au mshauri.

Kuhusu zana hii

Clip-njia inaruhusu watengenezaji kukata vipengele HTML na picha katika polygons sahihi ya kijiometri na maumbo bila kuhitaji Photoshop au SVG masks. Chagua kutoka presets maarufu, kukagua mask rendered kwa wakati halisi, na nakala safi CSS poligoni kuratibu tayari kwa uzalishaji.

Vidokezo vya matokeo bora

Kabla ya kuanza, tumia muda kidogo kusoma chaguo na ujaribu zana kwa mfano mdogo kwanza. Kila kitu hufanya kazi kwenye kivinjari kwenye kifaa chako mwenyewe; hakuna unachoandika au kuongeza kinachopakiwa na kufunga kichupo hufuta kila kitu. Ikiwa kitu hakionekani sawa, pakia upya ukurasa na ujaribu tena au tumia kiungo cha kuripoti kwenye ukurasa huu kutuambia kilichoharibika. Ikiwa matokeo bado yanaonekana vibaya, badilisha thamani moja kwa wakati ili uone kisanduku gani kinaathiri zaidi. Weka alama ya ukurasa huu ikiwa utaitumia tena.

Kwa ufupi

Maswali yanayoulizwa mara kwa mara

Ni nini CSS clip-njia?

The `clip-path` CSS property creates a clipping region that determines which parts of an element or image are visible.

Ni maumbo ni pamoja na kama presets?

Presets ni pamoja na pembetatu, hexagon, nyota ya pointi 5, bidhaa discount badge, chevron urambazaji, na masks mviringo.

Je, naweza kupiga picha na video kwa kutumia hii?

Yes. Apply the generated clip-path CSS rule to any `<img>`, `<video>`, `<div>`, or card component in your stylesheet.

Je, clip-njia kuathiri kipengele clickable hitboxes?

Katika browsers za kisasa, tu inayoonekana, unclipped eneo la kipengele majibu kwa pointer hover na bofya matukio.

Kitengeneza picha ya pasipotiPicha za ukubwa sahihi kwa pasipoti, viza na maombi ya kazi, na karatasi tayari kuchapishwa.
JPG kwenda PNGGeuza picha za JPG kuwa PNG.
PNG kwenda JPGGeuza picha za PNG kuwa faili ndogo za JPG.
Badilisha ukubwa na bana pichaBadilisha ukubwa wa picha hadi pikseli kamili, au ipunguze hadi KB 50, KB 100 au ukubwa wowote. Bila malipo, kwenye kivinjari chako.
Picha kwenda maandishi (OCR)Geuza maandishi ya Kibengali au Kiingereza kwenye picha au skani kuwa maandishi unayoweza kunakili.
HEIC kwenda JPGGeuza picha za HEIC za iPhone kuwa JPG inayofunguka kila mahali.
WebP kwenda JPGGeuza picha za WebP zilizohifadhiwa kutoka tovuti kuwa JPG inayofanya kazi kila mahali.
Kibadilishaji cha pichaBadilisha picha kati ya WebP, JPG na PNG, nyingi kwa wakati mmoja.
Picha kwenda Base64Geuza picha kuwa maandishi ya Base64, au Base64 kurudi kuwa picha.
Kichagua rangi kutoka pichaChagua rangi yoyote kutoka picha na upate misimbo ya HEX, RGB na HSL.
Kitengeneza faviconTengeneza favicon.ico na ukubwa wote wa aikoni za programu kutoka picha moja.
Ongeza maandishi kwenye pichaAndika maandishi kwenye picha ya mtindo wa mimi na uipakue.
Bila malipo kabisaHakuna ada, hakuna usajili
Faili hubaki za faraghaKila kitu hufanya kazi kwenye kivinjari chako
Rahisi katika lugha yakoInapatikana kwa lugha nyingi