အားလုံးပဲ မင်္ဂလာပါ။
ကျွန်တော်ကတော့ Spiceworks Myanmar မှာ Web Designer အဖြစ် တာဝန်ယူလုပ်ကိုင်နေတဲ့ ညီညီ‌ဇော် ဖြစ်ပါတယ်။ ဒီအပတ်မှာတော့ clip-path property တွေမှာပါတဲ့ shape တွေကို customize လုပ်တာနဲ့ပတ်သက်ပြီး ပြောပြပေးသွားမှာ ဖြစ်ပါတယ်။
Clip path shape အမျိုးအစားတွေထဲက

Cirle
ပထမဆုံးအနေနဲ့ div တစ်ခုဖန်တီးပြီး မိမိယူထားသည့် div တစ်ခုလုံးကို စက်ဝိုင်းပုံ ဖန်တီးချင်တဲ့အခါ style ထဲမှာ clip path shape တွေထဲက

clip-path: circle(50px at  50% 50%);

ကို အသုံးပြုရေးနိုင်ပါတယ်။ အချင်း( radius 50px) ရှိတဲ့ circle ကို ယူထားတဲ့ div ရဲ့ horizontal 50% vertical 50% ရှိတဲနေရာကို ဖန်တီးထားခြင်းဖြစ်ပါတယ်။

Ellipse
မိမိယူထားတဲ့ div ကို ဘဲဥပုံစံ ဖန်တီးချင်တဲ့အခါ clip path shape တွေထဲက ellipse ကိုအသုံးပြုပြီး

clip-path: ellipse(50px 60px at 10% 20%);

အခုလိုရေးပါတယ်။ Vertical 50px ရှိပြီး horizontal 60px ရှိတဲ့ ဘဲဥပုံစံ ကို ယူထားတဲ့ div ရဲ့ horizontal 10% vertical 20% ရှိတဲ့နေရာကို ဖန်တီးထားခြင်းဖြစ်ပါတယ်။

Inset
မိမိယူထားတဲ့ div ကို top, left, bottom, right ပုံစံမျိုး တွန်းပြီး ပုံဖော်ချင်တဲ့အခါ

clip-path: inset(100px 50px 40px 50px);

အခုလိုရေးပြီး ဖန်တီးလို့ရပါတယ်။

Polygon
Polygon shape ပုံစံတွေ ယူပြီး ဖန်တီးပုံဖော်လို့လည်းရပါသေးတယ်။ Default အနေနဲ့ အောက်ပါ link https://bennettfeely.com/clippy/ ထဲက polygon shape တွေကို မိမိ စိတ်ကြိုက် generate ပြုလုပ်နိုင်ပါတယ်။

အပေါ်မှာ ဖန်တီးခဲ့သည့် shape အတိုင်းစာသားတွေနဲ့ရေးလိုသည့်အခါ shape-outside ဆိုတဲ့ style ကို အသုံးပြုပြီးအောက်ပါ အတိုင်ရေးလို့ရပါတယ်။ Shape နဲ့စာသား ကြားမှာ margin ခြားလိုသည့်အခါ shape-margin ကိုအသုံးပြုနိုင်ပါတယ်။

  
        clip-path: polygon(50% 20%, 80% 50%, 20% 50%);
        shape-outside: polygon(50% 20%, 80% 50%, 20% 50%);
        float: left;
        shape-margin: 10px; 

ဒီအပတ်မှာတော့ ကျွန်တော် blog ကို ဒီလောက်နဲ့ဘဲ အဆုံးသတ်ပါရစေ။ ဖတ်ရှု့ပေးလို့ကျေးဇူးတင်ပါတယ်ခင်ဗျ။

reference: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path