CSS Clip-Path ģenerators

Šis rīks ģenerē CSS clip-path vērtību no formas veidnes — apļa, elipses, trīsstūra, piecstūra, sešstūra, zvaigznes vai noapaļota taisnstūra — un rāda apgriezto formu tiešraidē priekšskatījuma rūtiņā, pirms tu kopē CSS. Nav nepieciešams manuāli aprēķināt polygon() koordinātas biežāk sastopamām formām.

Kas ir šis rīks?

clip-path ir CSS īpašība, kas paslēpj visu ārpus definētas elementa reģiona, atstājot redzamu tikai formu iekšpusē — pārējā elementa kastīte joprojām ir izkārtojumā, tā vienkārši netiek zīmēta. Tā pieņem pamata formu funkcijas, piemēram, circle(), ellipse(), inset(), un polygon(), kas pieņem patvaļīgu x/y koordinātu pāru sarakstu, lai definētu jebkuru taisnmalu formu.

polygon() koordinātas ir grūtākā daļa, ko uzrakstīt manuāli — piecstūrim, sešstūrim vai zvaigznei ir vajadzīgi vairāki precīzi novietoti punkti, un viena kļūda izkropļo visu formu. Šis rīks aprēķina šīs koordinātas tavā vietā no formas veidnes, uzreiz atjaunina tiešraides priekšskatījumu un dod precīzu clip-path CSS kopēšanai.

Avots: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — specifikācijas, kas definē clip-path un tā pamata formu funkcijas.

Kāpēc to izmantot?

Tiešraides priekšskatījums apgriež reālu priekšskatījuma rūtiņu izvēlētajā formā, tāpēc tu redzi patieso rezultātu, nevis to iztēlojies pēc koordinātām.
Septiņas formas veidnes — aplis, elipse, trīsstūris, piecstūris, sešstūris, zvaigzne un noapaļots taisnstūris — sedz lielāko daļu clip-path lietojumu bez polygon punktu rakstīšanas ar rokām.
Apļa, elipses un noapaļota taisnstūra veidnēm ir izmēra/noapaļojuma slīdnis, lai precizētu formu bez koordinātu rediģēšanas.
Izvada standarta clip-path CSS, kas gatavs ielīmēt jebkurā elementā.
Darbojas pilnībā tavā pārlūkā — nekas no tavas konfigurācijas nekur netiek augšupielādēts. Bezmaksas, nav reģistrācijas, darbojas mobilajās ierīcēs.

Kā to lietot

Izvēlies formu no izvēlnes — apli, elipsi, trīsstūri, piecstūri, sešstūri, zvaigzni vai noapaļotu taisnstūri.
Aplim, elipsei un noapaļotam taisnstūrim pielāgo izmēra/noapaļojuma slīdni, lai precizētu apgriezumu.
Vēro, kā priekšskatījuma rūtiņa atjaunojas tiešraidē, mainot formu vai slīdni.
Kopē ģenerēto clip-path CSS un ievieto to elementā, kuru vēlies apgriezt.
Lai izmantotu attēlu vienkrāsainas rūtiņas vietā, pielieto to pašu clip-path īpašību elementam <img> vai elementam ar background-image.

Piemērs

Ievade

Forma: sešstūris

Izvade

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Regulāra sešstūra apgriezums, ko bieži izmanto nozīmīšu stila profila attēliem vai funkciju ikonām.

Pamata formas pretstatā polygon()

Aplis, elipse un inset (noapaļots taisnstūris) ir iebūvētas CSS pamata formu funkcijas ar savu vienkāršu sintaksi — viens vai divi rādiusi, plus neobligāta centra pozīcija vai stūra noapaļošana. Trīsstūris, piecstūris, sešstūris un zvaigzne nav iebūvētas formas; tās visas tiek izteiktas ar polygon(), plakanu x/y koordinātu pāru sarakstu, kas iezīmē formas kontūru. Šis rīks automātiski aprēķina šīs koordinātas regulāriem (vienmērīgi izvietotiem) daudzstūriem un piecstaru zvaigznei, kas ir tā smagā daļa, ko pareizi izdarīt ar rokām.

Izplatīti clip-path modeļi

Apļveida avatārs vai nozīmīte: circle() ar vidēju rādiusu, bieži kombinēts ar kvadrātisku avota attēlu, lai aplis netiktu izstiepts par elipsi.
Slīps sadaļas atdalītājs: pielāgots daudzstūris (šeit nav iekļauts kā veidne), kas nolej pilna platuma sadaļas augšējo vai apakšējo malu, radot ne-taisnstūra lapas pāreju.
Zvaigznes vērtējuma ikona vai nozīmīte: zvaigznes veidne, noderīga kā dekoratīva forma, nevis manuāli zīmēts SVG vienkāršiem gadījumiem.
Sešstūru fotogrāfiju režģis: sešstūros apgrieztas bildes, izkārtotas kā šūnveida izkārtojums — izplatīts portfolio/komandas lapas modelis.
Noapaļots taisnstūris kā vieglāka alternatīva border-radius, kad apgriezumam ir jāapgriež arī pārplūstošs bērnu saturs, jo border-radius vien neapgriež bērnelementus bez papildu overflow:hidden.

Kombinēšana ar citiem CSS rīkiem

clip-path bieži tiek kombinēts ar CSS gradientu kā apgrieztu fonu vai ar box-shadow, kas pielietots ietverošam elementam (jo clip-path apgriež arī elementa paša ēnu, tāpēc ēna uz vecāka elementa parasti ir risinājums apgrieztai formai, kurai tomēr jāizskatās kā peldošai).

→ CSS Gradient ģenerators · Border Radius ģenerators · Box Shadow ģenerators

Biežāk uzdotie jautājumi

Vai clip-path ietekmē elementa izkārtojuma izmēru?

Nē — elements saglabā savu sākotnējo kastītes izmēru un pozīciju izkārtojuma vajadzībām; clip-path maina tikai to, kas tiek uzzīmēts. Apkārtējie elementi tiek izkārtoti tā, it kā apgriezums nebūtu piemērots, kas var pārsteigt, ja gaidi, ka apgrieztā forma uzvedīsies kā mainīta izmēra elements.

Kāpēc box-shadow neparādās manai apgrieztajai formai?

clip-path apgriež visu elementa renderējumu, tostarp jebkuru tā radīto ēnu, tāpēc apļa vai daudzstūra formā apgriezta elementa paša box-shadow tiek nogriezta pie apgriezuma robežas. Lai iegūtu ēnu, kas seko redzamajai formai, pielieto box-shadow neapgrieztam ietverošam elementam ap apgriezto elementu.

Vai varu animēt vai pāriet no vienas clip-path formas uz citu?

Jā, bet tikai starp divām vienāda tipa clip-path vērtībām ar vienādu punktu skaitu — piemēram, viens polygon() ar 6 punktiem pārejot uz citu polygon() ar 6 punktiem. Pāreja starp principiāli atšķirīgām formām (no circle() uz polygon()) parasti nedarbosies gludi visos pārlūkos.

Vai clip-path var izmantot fona attēliem, ne tikai elementa saturam?

clip-path apgriež visu elementu — tostarp tā background-image, background-color, apmales un saturu kopā — nevis konkrēti fonu. Ja vēlies apgriezt tikai fona attēlu, atstājot pārējo saturu neapgrieztu, pielieto clip-path atsevišķam elementam, kas satur tikai fonu.

Vai clip-path tiek atbalstīts visos moderniuos pārlūkos?

Jā — clip-path ar pamata formu funkcijām (circle, ellipse, inset, polygon) ir plaši pieejams (Baseline) visos galvenajos pārlūkos kopš 2020. gada janvāra, saskaņā ar MDN saderības datiem. To parasti droši var izmantot produkcijā bez rezerves risinājuma pašreizējām pārlūku versijām.