CSS clip-path generatoru

Necə istifadə etmək olar

1. Hazır fiqurlardan birini seçin (üçbucaq, trapes, ox, şevron, ulduz, kəsilmiş künclər və s.) və ya sərbəst poliqon qurun.
2. Önizləmədə nöqtələri mausla və ya toxunuşla istədiyiniz yerə çəkin; hər nöqtənin dəqiq faiz koordinatları idarəetmə panelində görünür.
3. İstəyə görə «Dairə» (circle), «Ellips» (ellipse) və ya «Daxili kəsim» (inset) rejiminə keçin və radiusu tənzimləyin.
4. Fon növünü (qradiyent, foto və ya tünd fon) dəyişərək kəsilmiş sahənin şəffaflığını yoxlayın və «Kopyala» düyməsini basın.

Bu necə işləyir

clip-path nədir və necə işləyir?

clip-path xassəsi elementin görünən sahəsini təyin edir. Fiqurdan kənarda qalan hər şey görünməz olur və klikləri qəbul etmir. Köhnə clip xassəsindən fərqli olaraq, clip-path müasir vektor formalarını dəstəkləyir və elementin mütləq position: absolute olmasını tələb etmir.

.element {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

polygon() sintaksisi və koordinat oxları

polygon(x1 y1, x2 y2, ...) nöqtələr ardıcıllığıdır. Koordinatlar elementin sol yuxarı küncündən (0% 0%) sağ aşağı küncünə (100% 100%) qədər hesablanır. Nöqtələr saat əqrəbi istiqamətində verilməlidir. Faizin əvəzinə px və rem də istifadə edilə bilər.

clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%);

circle(), ellipse() və inset()

circle(radius at x y) mərkəz nöqtəsi olan dairəvi kəsim yaradır. ellipse(rx ry at x y) fərqli üfüqi və şaquli radiuslara imkan verir. inset(top right bottom left round radius) isə kənarlardan daxilə çəkilmiş düzbucaqlı kəsimdir və border-radius kimi dəyirmi künclər qəbul edir.

clip-path: circle(50% at center);
clip-path: inset(10px 20px round 12px);

clip-path və animasiya

clip-path eyni sayda və eyni növ nöqtələrə malik olduqda transition və ya @keyframes ilə rəvan animasiya edilə bilər. Məsələn, 4 nöqtəli düzbucaqlıdan 4 nöqtəli trapesə keçid mümkündür, lakin 3 nöqtəli üçbucaqdan 5 nöqtəli ulduza birbaşa CSS keçidi aparıla bilməz.

clip-path və kölgələr (box-shadow)

Vacib məqam: clip-path elementin öz box-shadow kölgəsini də kəsir! Kəsilmiş fiqura kölgə vermək üçün həmin elementin özünə və ya onun valideyninə filter: drop-shadow(...) tətbiq olunur — bu filtr kəsilmiş konturu izləyir.

.card {
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
}

Tez-tez verilən suallar