Razvoj / CSS oblici

CSS clip-path generator: poligon, krug, elipsa i inset

Pravite CSS izreze pomoću šest unapred podešenih poligona, tačaka koje možete prevlačiti ili podešavati tastaturom, kao i kontrola za krug, elipsu i inset. Pregledajte gradijent ili lokalnu sliku i kopirajte CSS u procentima ili pikselima.

CSS clip-path generator: poligon, krug, elipsa i inset: Prikazuje pregled isečen prema izabranom obliku, bez menjanja osnovne datoteke slike. Izlaz u procentima prati dimenzije elementa. Izlaz u pikselima koristi referentnu širinu i visinu; prikazani pregled se prilagođava veličini vašeg ekrana. Radi 100% lokalno u vašem pregledaču, bez otpremanja datoteka na server.

Kategorija
Alatke za programere
Pokretanja
U vašem pregledaču
Trošak
Besplatno · bez registracije
Dostupnost
Spremno za upotrebu
Test oblika clip putanjeLokalna obrada

U potpunosti radi u vašem pregledaču

Prevucite numerisanu tačku, koristite njene tastere sa strelicama ili unesite koordinate. Koordinate ispod su procenti; izlaz u pikselima koristi referentnu veličinu.

Tačka 1
Tačka 2
Tačka 3
Tačka 4
Tačka 5
Tačka 6
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Oblici izraženi u procentima menjaju veličinu zajedno sa elementom. Procenti za krug koriste normalizovanu dijagonalu, a procenti za elipsu širinu i visinu. Piksel-koordinate su fiksirane prema referentnim dimenzijama.

CSS isecanje

MDN clip-path: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path . Isecanje menja vidljivu oblast bez promene okvira elementa u rasporedu.

Koordinate osnovnih oblika

W3C CSS Shapes Level 1, osnovni oblici: https://www.w3.org/TR/css-shapes-1/#basic-shapes . Koordinate poligona i poluprečnici elipse izračunavaju se u odnosu na referentni okvir; procenti za krug koriste njegovu normalizovanu dijagonalu. Unapred podešene koordinate i gradijent su originalno umetničko delo.

Kako se koristi

  1. Izaberite oblik i unapred podešenu opciju, pa zadajte referentne dimenzije.
  2. Prevlačite tačke poligona, koristite tastere sa strelicama ili uredite koordinate; za druge oblike podesite kontrole.
  3. Izaberite izlaz u procentima ili pikselima i kopirajte CSS.

Privatnost i ograničenja

Opcionalni pregledi slika ostaju na vašem uređaju. Ništa se ne otprema.

Srodne alatke

CSS mrežaSenka okviraFlexbox

Često postavljana pitanja

Kako da uredim tačku bez prevlačenja?

Fokusirajte njenu numerisanu ručicu i koristite tastere sa strelicama ili unesite X i Y procente na listi tačaka. Poligoni moraju imati najmanje tri tačke.

Da li se ovde izdvaja isečena slika?

Ne. Ovde se izvozi CSS za HTML element. Lokalna slika služi samo za pregled.

Kako se mere procenti za krug?

CSS koristi normalizovanu dijagonalu, sqrt((width squared + height squared) / 2), kao referencu za poluprečnik kruga. Poluprečnici elipse koriste širinu i visinu zasebno.

Besplatan alat · pokretanja: u vašem pregledaču · nalog nije potreban