CSS Clip-Path გენერატორი

ეს ხელსაწყო ქმნის CSS clip-path მნიშვნელობას ფორმის წინასწარ განსაზღვრული ვარიანტიდან — წრე, ელიფსი, სამკუთხედი, ხუთკუთხედი, ექვსკუთხედი, ვარსკვლავი ან მომრგვალებული მართკუთხედი — და აჩვენებს გამოჭრილ ფორმას რეალურ დროში გადახედვის ყუთზე, სანამ CSS კოდს დააკოპირებთ. საერთო ფორმებისთვის polygon() კოორდინატების ხელით გამოთვლა საჭირო აღარ არის.

რა არის ეს ხელსაწყო?

clip-path არის CSS თვისება, რომელიც მალავს ყველაფერს ელემენტის განსაზღვრული არეალის მიღმა, ხილულს ტოვებს მხოლოდ შიდა ფორმას — ელემენტის ყუთის დანარჩენი ნაწილი მაინც არსებობს განლაგებაში, უბრალოდ არ იხატება. ის იღებს ისეთ ძირითად ფორმის ფუნქციებს, როგორიცაა circle(), ellipse(), inset() და polygon(), რომელთაგან ბოლო იღებს x/y კოორდინატთა წყვილების თვითნებურ სიას ნებისმიერი სწორკუთხა ფორმის განსაზღვრისთვის.

polygon() კოორდინატები ხელით დაწერის ყველაზე რთული ნაწილია — ხუთკუთხედს, ექვსკუთხედს ან ვარსკვლავს თითოეულს სჭირდება რამდენიმე ზუსტად განთავსებული წერტილი, და ერთის შეცდომაც კი ამახინჯებს მთელ ფორმას. ეს ხელსაწყო თქვენთვის ითვლის ამ კოორდინატებს ფორმის წინასწარი ვარიანტიდან, დაუყოვნებლივ ანახლებს რეალურ დროში გადახედვას და გაძლევთ ზუსტ clip-path CSS კოდს დასაკოპირებლად.

წყარო: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — სპეციფიკაციები, რომლებიც განსაზღვრავენ clip-path-ს და მის ძირითად ფორმის ფუნქციებს.

რატომ გამოვიყენო ის?

რეალურ დროში გადახედვა ჭრის რეალურ გადახედვის ყუთს არჩეული ფორმის მიხედვით, ასე რომ თქვენ ხედავთ ნამდვილ შედეგს, ნაცვლად იმისა, რომ წარმოიდგინოთ ის კოორდინატებიდან.
შვიდი ფორმის წინასწარი ვარიანტი — წრე, ელიფსი, სამკუთხედი, ხუთკუთხედი, ექვსკუთხედი, ვარსკვლავი და მომრგვალებული მართკუთხედი — ფარავს clip-path-ის გამოყენების უმეტესობას polygon წერტილების ხელით დაწერის გარეშე.
წრის, ელიფსისა და მომრგვალებული მართკუთხედის წინასწარი ვარიანტები მოიცავს ზომის/მომრგვალების სლაიდერს, რათა ფორმა ზუსტად მოარგოთ კოორდინატების რედაქტირების გარეშე.
გამოაქვს სტანდარტული clip-path CSS კოდი, მზად ნებისმიერ ელემენტზე ჩასასმელად.
მუშაობს მთლიანად თქვენს ბრაუზერში — არაფერი, რასაც აკონფიგურირებთ, არსად იტვირთება. უფასოა, რეგისტრაციის გარეშე, მუშაობს მობილურზეც.

როგორ გამოვიყენო

აირჩიეთ ფორმა ჩამოსაშლელი მენიუდან — წრე, ელიფსი, სამკუთხედი, ხუთკუთხედი, ექვსკუთხედი, ვარსკვლავი ან მომრგვალებული მართკუთხედი.
წრის, ელიფსისა და მომრგვალებული მართკუთხედის ფორმებისთვის დაარეგულირეთ ზომის/მომრგვალების სლაიდერი გამოჭრის ზუსტად მოსარგებად.
თვალი ადევნეთ გადახედვის ყუთის რეალურ დროში განახლებას, ფორმის ან სლაიდერის ცვლილებისას.
დააკოპირეთ გენერირებული clip-path CSS კოდი და ჩასვით იმ ელემენტზე, რომლის გამოჭრაც გსურთ.
მყარი ფერის ნაცვლად სურათისთვის, გამოიყენეთ იგივე clip-path თვისება <img> ელემენტზე ან ელემენტზე, რომელსაც აქვს background-image.

მაგალითი

შეყვანა

ფორმა: ექვსკუთხედი

შედეგი

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%);

სწორი ექვსკუთხედის გამოჭრა, ხშირად გამოიყენება ბეჯის სტილის პროფილის ფოტოებისთვის ან ფუნქციების ხატულებისთვის.

ძირითადი ფორმები polygon()-ის წინააღმდეგ

წრე, ელიფსი და inset (მომრგვალებული მართკუთხედი) არის CSS-ში ჩაშენებული ძირითადი ფორმის ფუნქციები საკუთარი მარტივი სინტაქსით — რადიუსი ან ორი, პლუს არასავალდებულო ცენტრის პოზიცია ან კუთხის მომრგვალება. სამკუთხედი, ხუთკუთხედი, ექვსკუთხედი და ვარსკვლავი ჩაშენებული ფორმები არ არის; ისინი ყველა გამოისახება polygon()-ით, x/y კოორდინატთა წყვილების ბრტყელი სიით, რომელიც ავლებს ფორმის კონტურს. ეს ხელსაწყო ავტომატურად ითვლის ამ კოორდინატებს რეგულარული (თანაბრად განლაგებული) მრავალკუთხედებისა და ხუთქიმიანი ვარსკვლავისთვის, რაც არის ხელით ზუსტად გაკეთების ყველაზე მოსაწყენი ნაწილი.

clip-path-ის გავრცელებული ნიმუშები

წრიული ავატარი ან ბეჯი: circle() საშუალო რადიუსით, ხშირად კვადრატულ საწყის სურათთან ერთად, რათა წრე ელიფსად არ გაიწელოს.
დახრილი სექციის გამყოფი: მორგებული მრავალკუთხედი (აქ წინასწარ ვარიანტად არ არის შეტანილი), რომელიც ხრის სრული სიგანის სექციის ზედა ან ქვედა კიდეს არასწორკუთხა გვერდის გაჭრისთვის.
ვარსკვლავის რეიტინგის ხატულა ან ბეჯის ფორმა: ვარსკვლავის წინასწარი ვარიანტი, სასარგებლო როგორც დეკორატიული ფორმა, ხელით დახატული SVG-ის ნაცვლად მარტივი შემთხვევებისთვის.
ექვსკუთხა ფოტოების ბადე: ექვსკუთხედით გამოჭრილი სურათები, ფიჭურად განლაგებული — პორტფოლიო/გუნდის გვერდების გავრცელებული ნიმუში.
მომრგვალებული მართკუთხედი, როგორც border-radius-ის მსუბუქი ალტერნატივა, როცა გამოჭრას ასევე სჭირდება გადავსებული შვილობილი კონტენტის მოჭრა, ვინაიდან border-radius თავისთავად არ ჭრის შვილობილ ელემენტებს დამატებითი overflow:hidden-ის გარეშე.

სხვა CSS ხელსაწყოებთან შერწყმა

clip-path ხშირად გამოიყენება CSS გრადიენტთან ერთად, როგორც გამოსაჭრელი ფონი, ან box-shadow-თან, გამოყენებულს გარსშემომსაზღვრელ ელემენტზე (ვინაიდან clip-path ასევე ჭრის ელემენტის საკუთარ ჩრდილს, მშობელ ელემენტზე ჩრდილის დადება ჩვეულებრივი გამოსავალია გამოჭრილი ფორმისთვის, რომელსაც მაინც უნდა ტივტივის ეფექტი ჰქონდეს).

→ Border Radius Generator · Box Shadow Generator

ხშირად დასმული კითხვები

მოქმედებს თუ არა clip-path ელემენტის განლაგების ზომაზე?

არა — ელემენტი ინარჩუნებს თავის ორიგინალურ ყუთის ზომასა და პოზიციას განლაგების მიზნებისთვის; clip-path მხოლოდ იმას ცვლის, რაც იხატება. გარშემო ელემენტები განლაგებულია ისე, თითქოს გამოჭრა არ იყოს გამოყენებული, რაც შეიძლება გაგაკვირვოთ, თუ ელით, რომ გამოჭრილი ფორმა შეცვლილი ზომის ელემენტივით მოიქცევა.

რატომ არ ჩანს box-shadow ჩემს გამოჭრილ ფორმაზე?

clip-path ჭრის მთელ ელემენტის რენდერს, მათ შორის ნებისმიერ ჩრდილს, რომელსაც ის ისვრის, ასე რომ წრით ან მრავალკუთხედით გამოჭრილი ელემენტის საკუთარი box-shadow იჭრება გამოჭრის საზღვარზე. ხილული ფორმის მიმდევარი ჩრდილის მისაღებად, გამოიყენეთ box-shadow გამოუჭრელ გარსშემომსაზღვრელ ელემენტზე, გამოჭრილის გარშემო.

შემიძლია თუ არა clip-path ფორმის ანიმაცია ან გადასვლა?

დიახ, მაგრამ მხოლოდ ერთი ტიპის და წერტილების იმავე რაოდენობის ორ clip-path მნიშვნელობას შორის — მაგალითად, 6 წერტილიანი polygon() მეორე, 6 წერტილიან polygon()-ზე გადასვლისას. ფუნდამენტურად განსხვავებულ ფორმებს შორის გადასვლა (circle()-დან polygon()-ზე) ჩვეულებრივ ბრაუზერებში გლუვად არ ანიმირდება.

შეიძლება თუ არა clip-path-ის გამოყენება ფონურ სურათებზე, და არა მხოლოდ ელემენტის კონტენტზე?

clip-path ჭრის მთელ ელემენტს — background-image-ს, background-color-ს, საზღვრებსა და კონტენტს ერთად — და არა კონკრეტულად ფონს. თუ გსურთ მხოლოდ ფონური სურათის გამოჭრა დანარჩენი კონტენტის გამოუჭრელად დატოვებით, გამოიყენეთ clip-path ცალკე ელემენტზე, რომელიც მხოლოდ ფონს შეიცავს.

მხარდაჭერილია თუ არა clip-path ყველა თანამედროვე ბრაუზერში?

დიახ — clip-path ძირითადი ფორმის ფუნქციებით (circle, ellipse, inset, polygon) MDN-ის თავსებადობის მონაცემების მიხედვით არის Baseline widely available ძირითად ბრაუზერებში 2020 წლის იანვრიდან. ზოგადად უსაფრთხოა მისი გამოყენება პროდაქშენში, მიმდინარე ბრაუზერების ვერსიებისთვის სათადარიგო ვარიანტის გარეშე.