CSS clip-path, shape() va mask: elementni shaklga kesish

Qisqacha: clip-path elementni shaklga kesadi: shakl ichidagisi ko'rinadi, tashqarisi — yo'q. clip-path: circle(50%) — doira, polygon(...) — istalgan ko'pburchak, yangi shape() — egri chiziqli, foiz bilan moslashuvchan shakl. mask-image esa elementni qisman shaffof qiladi: mask-image: linear-gradient(black 60%, transparent) — pastga qarab asta so'nish. Ikkalasi ham layout'ga tegmaydi: element joyini egallab turaveradi.

Bu darsda

• clip-path ning asosiy shakllarini yozasiz: inset(), circle(), ellipse(), polygon().
• Kesish nimani o'zgartirishini va nimani o'zgartirmasligini tushuntira olasiz: joy, sichqoncha, soya, fokus halqasi.
• path() va yangi shape() farqini bilasiz va to'lqinli chegara chizasiz.
• clip-path ni animatsiya qilasiz va qachon ishlamasligini bilasiz.
• mask-image va mask-composite bilan so'nish va "teshik" yasaysiz, shape-outside bilan matnni shakl atrofida oqizasiz.

Oldin bilishingiz kerak: Gradientlar, Normal oqim va float, Filterlar va aralashtirish rejimlari, Transition.

1. Nega bu kerak?

«Bahor» saytiga oshpaz Rustam akaning surati qo'shiladi. Dizayner uni doira ichida xohlaydi. Chegara va burchak darsidagi border-radius: 50% buni qila oladi. Lekin dizaynerning keyingi istaklari boshqacha:

• Bosh sahifadagi katta rasmning pastki cheti qiya yoki to'lqinli bo'lsin — xuddi dasturxon cheti kabi.
• "Yangi" belgisi yulduz shaklida bo'lsin.
• Uzun menyu tavsifi pastga qarab asta so'nib, "Batafsil" tugmasiga "oqib" tushsin.

border-radius faqat burchaklarni yumaloqlaydi. Qolganini ilgari rasm muharririda qirqib, alohida PNG qilib saqlashardi. Rasm almashsa — qaytadan qirqish.

Endi bu ish CSS'da. Bolalikdagi trafaretni eslang: qog'ozda yulduz shaklida teshik, uni devorga qo'yib bo'yaysiz. Devorga faqat teshik joyidagi bo'yoq tushadi. clip-path — shunday trafaret: element to'liq chiziladi, lekin ekranda faqat shakl ichidagisi qoladi.

2. clip-path: asosiy shakllar

2.1 To'rt shakl

clip-path — elementning ko'rinadigan qismini shakl bilan chegaralaydigan xususiyat. Shakl ichidagisi chiziladi, tashqarisi — shaffof. Shakllar basic shapes (asosiy shakllar) funksiyalari bilan yoziladi:

<style>
  body { font-family: system-ui, sans-serif; }
  .qator { display: flex; flex-wrap: wrap; gap: 16px; }
  figure { margin: 0; font-size: 13px; text-align: center; }
  .rasm {
    width: 120px;
    height: 90px;
    background:
      radial-gradient(circle at 70% 35%, #ffd54a 0 12%,
        transparent 13%),
      linear-gradient(#8fd3ff, #e8f4ff 55%, #2f6b3a 55%);
  }
  .k1 { clip-path: inset(10px 20px round 12px); }
  .k2 { clip-path: circle(40%); }
  .k3 { clip-path: ellipse(50% 35% at 50% 50%); }
  .k4 { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
</style>
<div class="qator">
  <figure><div class="rasm"></div>asl</figure>
  <figure><div class="rasm k1"></div>inset()</figure>
  <figure><div class="rasm k2"></div>circle()</figure>
  <figure><div class="rasm k3"></div>ellipse()</figure>
  <figure><div class="rasm k4"></div>polygon()</figure>
</div>

Nimaga qarang: beshta bir xil 120×90 piksellik manzara. Ikkinchisi chetlaridan qirqilgan va burchaklari yumaloq. Uchinchisi — doira, to'rtinchisi — cho'zinchoq oval, beshinchisi — uchburchak. Har biri o'z 120 piksellik joyini baribir egallab turibdi — tagidagi yozuvlar bir qatorda.

2.2 Har bir funksiya

• inset(tepa o'ng past chap round radius) — har tomondan ichkariga qirqish, padding kabi soat mili tartibida (CSS nima darsidagi qoida). round dan keyin — burchak radiusi.
• circle(radius at markaz) — doira. circle(50%) — element qutisiga ichki chizilgan doira. Markaz yozilmasa — o'rtada.
• ellipse(rx ry at markaz) — oval: ikki radius, yotiq va tik.
• polygon(x1 y1, x2 y2, ...) — ko'pburchak. Har juftlik — bitta uch, chap yuqori burchakdan hisoblanadi. 50% 0 — tepa o'rtasi, 100% 100% — pastki o'ng burchak. Brauzer oxirgi uchni birinchisiga o'zi ulaydi.

Foizlar element o'lchamidan olinadi: element kattalashsa, shakl ham u bilan birga kattalashadi.

position darsidagi korinmas class'ini eslang: unda clip-path: inset(50%) bor edi va "to'liq o'rganamiz" degandik. Endi tushunarli: har tomondan 50% qirqilsa, ko'rinadigan qism qolmaydi. Element ekranda yo'q, lekin ekran o'quvchi uni o'qiydi.

2.3 Foiz nimadan olinadi: shakl qutisi

circle(50%) dagi 50% — qaysi o'lchamdan? Sukut bo'yicha — elementning border-box idan, ya'ni ramka bilan birga (Box model). Shakldan keyin boshqa qutini yozsangiz, hisob o'sha qutidan boshlanadi:

.oshpaz {
  padding: 8px;
  border: 4px solid #2f6b3a;
  clip-path: circle(50%) content-box;
}

Bu yerda doira padding va ramkasiz, faqat kontent qismiga chiziladi — ramka va padding kesilib qoladi. Qiymatlar background-clip dan tanish: border-box, padding-box, content-box, shuningdek margin-box. Shaklsiz faqat qutini yozish ham mumkin: clip-path: content-box — elementni kontent qutisi chegarasida to'rtburchak qilib kesadi.

Baseline ma'lumotiga ko'ra bu qutilar hamma asosiy brauzerlarda 2023-yil noyabridan bor, 2026-yil mayidan esa Baseline "keng tarqalgan". Amalda ko'pincha sukutdagi border-box yetadi — bu qismni "kerak bo'lib qolsa" deb eslab qo'ying.

Yana bitta shakl manbai — SVG: clip-path: url(#shakl) sahifadagi <clipPath id="shakl"> elementini ishlatadi. Filterlar darsidagi filter: url(#...) kabi. Murakkab logotip shaklini dizayner SVG'da chizib bersa, shu yo'l qulay.

Tekshirib ko'ring: Oshpaz suratini to'rtburchak ichida olti burchakli qilmoqchisiz. Qaysi funksiya? Nechta nuqta yoziladi?

3. Kesish nimani o'zgartiradi

3.1 Joy saqlanadi, sichqoncha kesiladi

clip-path — chizishdagi o'zgarish, layout emas. Doira qilib kesilgan 200×200 piksellik quti sahifada baribir 200×200 joy oladi. 2D transformlar dagi kabi: qo'shnilar surilmaydi.

Lekin sichqoncha uchun kesilgan joy yo'q. Chrome'da tekshirdik: circle(50%) bilan kesilgan qutining chap yuqori burchagi (5, 5 nuqta) bosilganda, bosish qutiga emas, uning ortidagi body ga tushdi. O'rtasi (100, 100) esa qutining o'zi. Ya'ni kesilgan tugma burchagini bosib bo'lmaydi — va bu to'g'ri: foydalanuvchi ko'rmagan joyni bosmaydi.

3.2 Soya va fokus halqasi ham kesiladi

clip-path element qutisidan tashqaridagi hamma narsani ham kesadi: box-shadow ni, outline ni. Ikkinchisi — accessibility muammosi:

<style>
  body { font-family: system-ui, sans-serif; padding: 16px; }
  button {
    margin: 12px;
    padding: 10px 16px;
    border: 0;
    font: inherit;
    background: #2f6b3a;
    color: #fffaf0;
    outline: 3px solid #b4461a;
    outline-offset: 3px;
  }
  .kesilgan {
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  }
</style>
<button type="button">Oddiy</button>
<button type="button" class="kesilgan">❌ Kesilgan</button>

Nimaga qarang: ikkala tugmada ham bir xil qizg'ish outline yozilgan (namoyish uchun doim ko'rinib turibdi). Oddiy tugmada halqa bor, qiya kesilganida — yo'q. Klaviatura bilan yuradigan Bobur fokus qayerdaligini ko'rmaydi (Klaviatura va fokus).

Ikki yechim:

• Kesishni ichki elementga bering. Tugmaning o'zi to'rtburchak qolsin, qiya fon — ::before da. Halqa tugmaniki, kesilmaydi.
• Soya kerak bo'lsa — kesilgan elementning otasiga filter: drop-shadow() (Filterlar). Ota kesilmagan, u bolasining shakliga soya chizadi.

Tekshirib ko'ring: 200×200 piksellik rasm clip-path: circle(50%) bilan doira qilindi. Uning yonidagi matn rasmga yaqinlashadimi? Rasmning burchagini bossangiz, rasmga bosilgan bo'ladimi?

4. path() va shape(): egri chiziqlar

4.1 path() — SVG tili

Ko'pburchak faqat to'g'ri chiziqlardan iborat. To'lqin yoki yoy uchun path() bor — ichiga SVG'dagi d atributining yozuvi qo'yiladi: M (boshla), H (yotiq chiziq), V (tik chiziq), Q (egri), Z (yop). SVG darsida uni ko'rgansiz.

.bosh-rasm {
  clip-path: path("M0 0 H200 V80 Q100 120 0 80 Z");
}

Bitta katta kamchilik: path() da faqat pikselli raqamlar. H200 — 200 piksel, foiz yozib bo'lmaydi. Rasm telefonda 360 piksel, kompyuterda 1200 bo'lsa, shakl bitta o'lchamga "qotib" qoladi. path() bilan clip-path 2021-yildan hamma asosiy brauzerlarda bor.

4.2 shape() — CSS tili

shape() — xuddi shu vazifa, lekin CSS sintaksisida: foizlar, calc(), rem — hammasi ishlaydi. Buyruqlar so'z bilan yoziladi:

• from x y — boshlanish nuqtasi;
• line to x y — to'g'ri chiziq;
• curve to x y with cx cy — egri chiziq; cx cy — egrini o'ziga "tortadigan" nazorat nuqtasi;
• close — boshlanishga qaytib yopish.

«Bahor» bosh rasmining pastki cheti — dasturxon kabi yumshoq yoy:

<style>
  body { font-family: system-ui, sans-serif; margin: 0; }
  .bosh {
    height: 150px;
    padding: 16px;
    color: #fffaf0;
    background:
      radial-gradient(circle at 80% 30%, #ffd54a 0 10%,
        transparent 11%),
      linear-gradient(#2f6b3a, #1a5d1a);
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    clip-path: shape(
      from 0 0,
      line to 100% 0,
      line to 100% calc(100% - 30px),
      curve to 0 calc(100% - 30px) with 50% 100%,
      close
    );
  }
  h1 { margin: 0; font-size: 24px; }
</style>
<header class="bosh">
  <h1>Choyxona «Bahor»</h1>
  <p>Har kuni 7:00 dan 23:00 gacha</p>
</header>
<p>Bugun: osh, lag'mon, manti.</p>

Nimaga qarang: yashil panelning pastki cheti o'rtasida pastga egilgan yumshoq yoy — chetlarida 30 piksel yuqoriroq. Telefon, planshet va kompyuter tugmalarini bosing: yoy har enda chiroyli, chunki nuqtalar foizda.

Blokda clip-path ikki marta yozilgan — bu ataylab. shape() ni bilmaydigan brauzer ikkinchi qatorni tashlaydi va birinchisini — qiya polygon() ni qo'llaydi. Biladigan brauzerda ikkinchisi yutadi. CSS nima darsidagi "kechirimli o'qish" zaxira sifatida ishladi.

4.3 Brauzerlarda

Baseline ma'lumotiga ko'ra shape() 2026-yil 24-fevraldan Baseline ("yangi"): Chrome 135, Firefox 148, Safari 18.4. U Interop 2026 ning yo'nalishlaridan biri. Interop — brauzer ishlab chiqaruvchilarning har yilgi kelishuvi: tanlangan imkoniyatlar hamma brauzerda bir xil ishlashi uchun birga tuzatiladi (Yangi paydo bo'layotgan CSS). Shuning uchun hozircha zaxira polygon() qatori kerak.

shape() faqat clip-path da emas: shape-outside va offset-path (keyframes darsidagi yo'l bo'ylab harakat) ham uni oladi.

Tekshirib ko'ring: Dizayner Figma'dan SVG to'lqin yo'lini berdi: M0 0 H400 V100 Q200 160 0 100 Z. Sayt responsive. path() bilan ishlatasizmi?

5. clip-path animatsiyasi

clip-path animatsiya qilinadi — agar ikki holat bir xil turdagi shakl bo'lsa. Klassik effekt — rasmning doira ichidan "ochilishi":

<style>
  body { font-family: system-ui, sans-serif; }
  .karta {
    width: 180px;
    height: 110px;
    display: grid;
    place-items: center;
    color: #fffaf0;
    font-weight: bold;
    background: linear-gradient(135deg, #b4461a, #f2b04a);
    clip-path: circle(20% at 50% 50%);
  }
  @media (prefers-reduced-motion: no-preference) {
    .karta { transition: clip-path 400ms ease-out; }
  }
  .karta:hover,
  .karta:focus-visible {
    clip-path: circle(75% at 50% 50%);
  }
</style>
<div class="karta" tabindex="0">Bugungi aksiya</div>

Sichqonchani olib keling yoki Tab bilan fokuslang. Nimaga qarang: kichik doira ichida faqat matnning bir qismi; hover'da doira 400 millisekund davomida kattalashib, butun kartani ochadi. prefers-reduced-motion: reduce sozlamasi yoqilgan bo'lsa, o'tish animatsiyasiz — darhol (Harakat etikasi).

Qoida:

• circle() → circle(), inset() → inset() — silliq.
• polygon() → polygon() — faqat uchlar soni bir xil bo'lsa. Chrome'da tekshirdik: uch uchli uchburchakdan to'rt uchli to'rtburchakka o'tish animatsiyaning chorak qismida ham uchburchak edi — sakrash, silliq o'tish emas. Yechim: uchburchakka to'rtinchi "ortiqcha" nuqta qo'shing (masalan, ikki uch bir joyda).
• Turli funksiyalar (circle() → polygon()) — sakraydi.

clip-path ni animatsiya qilish transform dan qimmatroq — har kadrda qayta chiziladi (Rendering). Kichik elementlarda muammo yo'q.

Tekshirib ko'ring: Karta hover'da clip-path: inset(0) dan clip-path: circle(75%) ga o'tishi kerak edi, lekin silliq emas — birdan almashadi. Nega va qanday tuzatasiz?

6. mask-image: qisman shaffoflik

6.1 Kesish va maska farqi

clip-path — "ha yoki yo'q": piksel yo shakl ichida, yo tashqarisida. mask-image — "qanchalik": maskaning har nuqtasidagi shaffoflik elementning shu nuqtasiga o'tadi. Maskaning qora (yoki istalgan qalin rangli) joyi — element ko'rinadi, shaffof joyi — yo'q, yarim shaffof joyi — yarim ko'rinadi.

Eng ko'p ishlatiladigan maska — gradient. Uzun tavsifni asta so'ndiramiz:

<style>
  body { font-family: system-ui, sans-serif; background: #fffaf0; }
  .tavsif {
    max-width: 320px;
    height: 96px;
    overflow: hidden;
    margin: 0;
    mask-image: linear-gradient(black 50%, transparent);
  }
</style>
<p class="tavsif">
  «Bahor» oshi — Rustam akaning ustozidan qolgan retsept:
  devzira guruch, qo'y go'shti, sariq sabzi va qozonning
  tagida qizargan piyoz. Osh o'tin olovida, katta qozonda
  pishiriladi va har kuni soat 12:00 da tortiladi.
</p>
<button type="button">Batafsil</button>

Nimaga qarang: matnning yuqori yarmi to'liq qora, pastga tushgan sari ochlashib, oxirgi qator deyarli ko'rinmaydi. Bu yerda matn rangi o'zgarmadi — elementning shaffofligi o'zgardi. Fon qanday bo'lsa ham (rasm, gradient) so'nish to'g'ri ishlaydi.

6.2 Maska — fon kabi

Maskaning xususiyatlari Fonlar darsidagilarga o'xshaydi: mask-size, mask-position, mask-repeat, bir nechta qatlam vergul bilan. Qisqa yozuvi — mask. Rasm ham maska bo'la oladi: mask-image: url("yulduz.svg") — element yulduz shaklida, chetlari yumshoq.

mask-composite — bir necha maska qatlami qanday birlashishi: add (qo'shish), subtract (ayirish), intersect (kesishma), exclude (faqat bittasida bor joy). Masalan, "teshikli" karta:

<style>
  body { font-family: system-ui, sans-serif; }
  .chipta {
    width: 220px;
    padding: 16px;
    color: #fffaf0;
    background: #2f6b3a;
    mask-image:
      radial-gradient(circle at 0 50%, black 12px,
        transparent 13px),
      linear-gradient(black, black);
    mask-composite: exclude;
  }
</style>
<div class="chipta">
  <strong>Aksiya chiptasi</strong>
  <p>Seshanba: osh 20% arzon</p>
</div>

Nimaga qarang: yashil chiptaning chap chetida yarim doira "o'yilgan" — konsert chiptasidagi kabi. Ikki maska: to'liq to'rtburchak va chap chetdagi kichik doira. exclude — "faqat bittasida bor joy": doira ikkalasida bor, shuning uchun o'sha joy teshik bo'ldi.

6.3 Maska yoki clip-path: qaysi birini tanlash

Ikkalasi ham "elementning bir qismini yashiradi", lekin vazifasi har xil:

Oxirgi qator muhim: maska faqat ko'rinishni o'zgartiradi. Chrome'da tekshirdik: maskaning to'liq shaffof pastki yarmini bosganda ham bosish elementning o'ziga tushdi. Ko'rinmaydigan "tugma" foydalanuvchini chalg'itmasin — bosiladigan elementni maska bilan yashirmang.

Qoida: aniq geometrik shakl — clip-path. So'nish, yumshoq chet, rasm shaklidagi "trafaret" — mask-image.

6.4 Brauzerlarda

Baseline ma'lumotiga ko'ra maska xususiyatlari (mask-image, mask-size, mask-composite va boshqalar) prefikssiz 2023-yil dekabridan hamma asosiy brauzerlarda bor, 2026-yil iyunidan Baseline "keng tarqalgan". Ilgari faqat -webkit-mask-image ishlagan — eski kodda ikkala qatorni ko'rasiz, bugun prefiks shart emas. Ba'zi qiymatlari (mask-mode, mask-clip: text kabi) hali hamma joyda yo'q.

Tekshirib ko'ring: Rasmning pastki qismi asta shaffof bo'lsin. clip-path: inset(0 0 30% 0) yozildi. Nima noto'g'ri?

7. shape-outside bilan birga: matn shakl atrofida

Normal oqim va float darsida shape-outside ni ko'rgan edik: u float atrofidagi matn oqimini shaklga keltiradi — lekin rasmni o'zini kesmaydi. O'sha darsda "rasmning o'zini doira qilib kesish — clip-path ishi" degandik. Ikkalasi birga:

<style>
  body { font-family: system-ui, sans-serif; max-width: 420px; }
  .oshpaz {
    float: left;
    width: 120px;
    height: 120px;
    margin-inline-end: 12px;
    background:
      radial-gradient(circle at 50% 38%, #f2c9a0 0 18%,
        transparent 19%),
      radial-gradient(circle at 50% 100%, #fffaf0 0 45%,
        transparent 46%),
      #2f6b3a;
    clip-path: circle(50%);
    shape-outside: circle(50%);
  }
</style>
<div class="oshpaz" role="img" aria-label="Oshpaz Rustam aka"></div>
<p>Rustam aka «Bahor» oshxonasida o'n besh yildan beri ishlaydi.
Uning oshi Toshkentda mashhur: har kuni tushga yaqin navbat
paydo bo'ladi. U shogirdlarga qozonni qanday qizdirishni,
guruchni qachon solishni va olovni qanday pasaytirishni
o'rgatadi.</p>

Nimaga qarang: yashil fonli "surat" doira shaklida, va matn qatorlari doiraning egriligi bo'ylab — tepada va pastda chetga yaqinroq, o'rtada uzoqroq. clip-path ko'rinishni, shape-outside esa matn oqimini kesdi. Bir xil qiymat — bir xil shakl.

Matn doiraga juda yopishib qolsa — shape-margin: shape-margin: 12px shakl atrofiga matn uchun qo'shimcha masofa qo'shadi. Oddiy margin bu yerda yordam bermaydi: u to'rtburchak qutiga ta'sir qiladi, shaklga emas.

Rasm kesiladigan joyni oson chizish uchun onlayn Clippy vositasi bor (bennettfeely.com/clippy): nuqtalarni sichqoncha bilan surasiz, u tayyor polygon() kodini beradi.

8. Ko'p uchraydigan xatolar

8.1 Fokus halqasi yo'qoldi

Tugma yoki havola clip-path bilan kesildi — outline ham kesildi. Tuzatish: kesishni ::before ga yoki ichki elementga bering.

8.2 Soya ko'rinmaydi

clip-path va box-shadow bitta elementda. Soya shakldan tashqarida — kesildi. Tuzatish: otaga filter: drop-shadow().

8.3 Shakl ekran enida "sinadi"

path() pikselda yozilgan. Tuzatish: shape() foizlar bilan, zaxira — polygon().

8.4 Animatsiya sakraydi

polygon() lar uchlari soni har xil yoki funksiyalar har xil. Tuzatish: bir xil turdagi shakl, bir xil nuqtalar soni.

8.5 "Kesilgan" joy hali ham joy egallaydi

Doira qilib kesilgan rasm atrofida matn to'rtburchak bo'yicha turadi. clip-path layout'ni o'zgartirmaydi. Tuzatish: float bo'lsa — shape-outside; qolgan hollarda bu normal xulq.

9. Mashqlar

Mashqlarni kurs/mashqlar/06/ papkasida bajaring.

1-mashq (oson): Dumaloq oshpaz

«Bahor»ning "Biz haqimizda" sahifasidagi oshpaz rasmi (img, 160×160) doira ichida bo'lsin. Ikki yo'lni yozing: border-radius va clip-path. Qaysi birida box-shadow saqlanadi?

Ishora: circle() radiusi foizda. Soya haqida — «Soya va fokus halqasi ham kesiladi» bo'limi.

/* 1-yo'l: soya saqlanadi */
.oshpaz-1 {
  border-radius: 50%;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
}

/* 2-yo'l: soya kesiladi */
.oshpaz-2 {
  clip-path: circle(50%);
}

2-mashq (o'rta): Yulduz shaklidagi "Yangi" belgisi

taom-karta yangi kartasining burchagida "Yangi" yozuvli belgi bor (span, 64×64). U besh uchli yulduz shaklida bo'lsin va sichqoncha kartaga kelganda yulduz 10 daraja buralsin — faqat harakat taqiqlanmagan bo'lsa.

Ishora: yulduz — 10 nuqtali polygon() (5 ta tashqi uch va 5 ta ichki burchak). Clippy'da tayyor yulduz bor. Burash — 2D transformlar dagi rotate.

.taom-karta.yangi .belgi {
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  background: #b4461a;
  color: #fffaf0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

@media (prefers-reduced-motion: no-preference) {
  .taom-karta.yangi .belgi {
    transition: rotate 200ms ease-out;
  }

  .taom-karta.yangi:hover .belgi {
    rotate: 10deg;
  }
}

3-mashq (qiyin): Stajyorning to'lqinli header'i

header {
  clip-path: path("M0 0 H1200 V160 Q600 220 0 160 Z");
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.3);
  transition: clip-path 300ms;
}

header:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

header a {
  outline-offset: 4px;
}

Shikoyatlar: (1) telefonda to'lqin yo'q, header'ning o'ng qismi kesilib qolgan; (2) soya yo'q; (3) hover'dagi o'tish silliq emas; (4) klaviatura bilan menyu havolalarining fokus halqasi pastki qismida kesilyapti.

Har muammoning sababini toping va tuzating.

Ishora: to'rt muammo — path() ning birligi, clip-path va soya, animatsiya qoidasi, fokus halqasi.

header {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  clip-path: shape(
    from 0 0,
    line to 100% 0,
    line to 100% calc(100% - 2rem),
    curve to 0 calc(100% - 2rem) with 50% 100%,
    close
  );
  padding-block-end: 2.5rem; /* havolalar kesilgan joydan uzoqda */
}

.sarlavha-orami {
  filter: drop-shadow(0 4px 12px rgb(0 0 0 / 0.3));
}

4-mashq: Portfolio qadami — bosh sahifa rasmiga yumshoq to'lqin

Portfolio bosh sahifasidagi ish joyi rasmi (main > img, Yakuniy loyiha da border-radius: 0.5rem) pastki cheti bilan yumshoq yoy hosil qilsin.

1. shape() bilan pastki chet: chetlarida 1.5rem yuqoriroq, o'rtada — pastda.
2. shape() ni bilmaydigan brauzerda — qiya kesim (polygon()).
3. Yuqori burchaklardagi yumaloqlik saqlansinmi — tekshiring va sababini yozing.
4. Telefon va kompyuter enida ko'ring.

Ishora: «shape() — CSS tili» bo'limidagi «Bahor» namunasi; 30px o'rniga 1.5rem.

/* Pastki chet — yumshoq yoy (clip-path va shape() darsi);
   eski brauzerda — qiya kesim */
main > img {
  border-radius: 0.5rem;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  clip-path: shape(
    from 0 0,
    line to 100% 0,
    line to 100% calc(100% - 1.5rem),
    curve to 0 calc(100% - 1.5rem) with 50% 100%,
    close
  );
}

10. Real ishda

• Landing sahifalar. Qiya va to'lqinli bo'lim chegaralari — zamonaviy landinglarning eng ko'p uchraydigan bezagi. Ilgari ular SVG rasmlar bilan qilinardi, endi clip-path va shape() bilan.
• Rasmlar galereyasi. Profil suratlari, hover'da "ochiladigan" kartalar, olti burchakli "asalari uyasi" to'rlari.
• Mask bilan so'nish. Gorizontal aylanadigan lentalarning chetlari, "Batafsil" dan oldingi matn, rasm ustidagi o'qiladigan sarlavha — hammasi mask-image gradientlari.
• Figma bilan ishlash. Dizayner shaklni vektor sifatida chizadi; dasturchi uni SVG qilib eksport qiladi va yo clip-path: url(#...), yo foizlarga o'girilgan polygon()/shape() sifatida ishlatadi (Figma dasturchi uchun). Qaysi yo'l — shakl responsive bo'lishi kerakmi, shunga bog'liq.
• Bezak — faqat bezak. Kesish va maska ma'noni o'zgartirmaydi: rasmning alt i, tugmaning nomi, matnning o'zi saqlanadi. Maska bilan so'ndirilgan matnni ekran o'quvchi to'liq o'qiydi — "Batafsil" tugmasi ko'radigan odam uchun kerak, lekin matnning oxiri ham HTML'da bo'lishi shart.
• Intervyuda so'raladi: "clip-path va mask farqi?", "Nega clip-path li tugmada fokus ko'rinmaydi?", "shape() path() dan nimasi bilan yaxshi?". Endi uchalasiga ham javob bera olasiz.

Xulosa

• clip-path elementni shaklga kesadi: inset(), circle(), ellipse(), polygon(); joy saqlanadi, kesilgan joy bosilmaydi.
• Kesish box-shadow va outline ni ham kesadi — soya otaga drop-shadow(), fokus uchun ichki element.
• path() — SVG yozuvi, faqat piksel; shape() — CSS yozuvi, foiz va calc(), 2026-yil fevralidan Baseline ("yangi"), zaxira — polygon().
• clip-path animatsiyasi — bir xil turdagi shakl va bir xil nuqtalar soni bilan.
• mask-image — qisman shaffoflik (gradient bilan so'nish), mask-composite — maskalarni birlashtirish.
• shape-outside + clip-path — ham ko'rinish, ham matn oqimi shaklda.

Keyingi dars: Yangi paydo bo'layotgan CSS va uni kuzatib borish — if(), sibling-index(), @function kabi endi kelayotgan imkoniyatlar va ularni qayerdan bilib turishni o'rganamiz.

Manbalar

• MDN: "clip-path", "basic-shape", "shape()", "mask-image", "mask-composite", "shape-outside" — developer.mozilla.org
• W3C: "CSS Masking Module Level 1", "CSS Shapes Module Level 2" — w3.org/TR
• web-features: "clip-path", "shape-function", "masks" — web-platform-dx.github.io/web-features-explorer
• Clippy — CSS clip-path generatori: bennettfeely.com/clippy