প্রতিক্রিয়াশীল ক্লিপিংয়ের জন্য আকৃতি() ব্যবহার করুন

bookmark_border সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।

Noam Rosenthal

প্রকাশিত: 8 এপ্রিল, 2025

clip-path বৈশিষ্ট্য আপনাকে একটি বৃত্ত, বহুভুজ বা এমনকি একটি SVG পাথে ক্লিপ করে একটি উপাদানের আকৃতি পরিবর্তন করতে দেয়। যাইহোক, Chrome 135 এবং Safari 18.4 এর আগে, আপনাকে প্রতিক্রিয়াশীল বহুভুজ এবং SVG পাথ ব্যবহার করে প্রতিক্রিয়াশীল নয় এমন আরও জটিল আকারের মধ্যে বেছে নিতে হয়েছিল। নতুন shape() ফাংশনের সাথে, একটি clip-path উপাদানটিকে একটি নন-পলিগন আকৃতিতে ক্লিপ করতে পারে যা প্রতিক্রিয়াশীলও।

একটি পতাকা আকৃতি তৈরি করুন

উদাহরণ হিসেবে, clip-path: path() এবং clip-path: shape() সাথে একটি পতাকা আকৃতি তৈরির তুলনা করুন।

একটি পতাকার আকৃতি ঠিক একটি বহুভুজ নয়, কারণ এর উপরের এবং নীচের সীমানাগুলি সরল রেখা বা গোলাকার কোণগুলির পরিবর্তে ঘন বেজিয়ার বক্ররেখা।

clip-path: path()

এই পতাকার মত একটি আকৃতি একটি SVG পাথ ব্যবহার করে উপস্থাপন করা যেতে পারে:

.flag {
  clip-path: path(
    "M 0 20 \
     C 25 0 75 40 100 20 \
     V 80 \
     C 75 100 25 60 0 80 \
     z");
}

এটি ভেঙে ফেলার জন্য, একটি SVG পাথ হল পাথ কমান্ডের একটি সিরিজ:

1. 0, 20 এ সরান।
2. কন্ট্রোল পয়েন্ট (25,0 এবং 75, 40) ব্যবহার করে 100, 20 পর্যন্ত বক্ররেখা।
3. উল্লম্ব রেখা 80।
4. কন্ট্রোল পয়েন্ট (75,100 এবং 25,50) ব্যবহার করে 0, 80 এ কার্ভ করুন।
5. পথটি বন্ধ করুন (0,20 এ লাইন)।

এটি একটি পতাকা আকৃতি আঁকে, তবে সমস্ত ইউনিট পিক্সেলে রয়েছে। SVG সেই পিক্সেলগুলিকে একটি ভিউ-বক্সে স্কেল করতে পারে, তবে এমনভাবে যা সর্বদা পুরো আকৃতির জ্যামিতিক স্কেলের মতো দেখাবে।

উদাহরণস্বরূপ, আপনি যদি পুরো আয়তক্ষেত্রটি স্কেল করতে চান তবে বক্ররেখার উচ্চতা এবং প্রস্থ 20px বজায় রাখতে চান, SVG কাজটি করতে পারবে না।

shape()

shape() ব্যবহার করে একই ফলাফলের তুলনা করুন। আকৃতি ফাংশন SVG পাথ কমান্ডের অনুরূপ কমান্ডের একটি সিরিজ গ্রহণ করে। যাইহোক, এই কমান্ডগুলি যেকোন CSS ইউনিটে CSS দৈর্ঘ্য এবং শতাংশ গ্রহণ করে।

নিম্নলিখিত CSS পতাকাকে একটি shape() রূপান্তর করে শতকরা একক সহ:

.flag {
  clip-path: shape(from 0% 20%,
     curve to 100% 20% with 25% 0% / 75% 40%,
     vline to 80%,
     curve to 0% 80% with 75% 100% / 25% 60%,
     close
  );
}

এটা প্রতিক্রিয়াশীল করুন

উপলব্ধ CSS দৈর্ঘ্যের সম্পূর্ণ পরিসরের সাথে, আপনি প্রতিটি স্থানাঙ্কের জন্য কোনটি ব্যবহার করবেন তা চয়ন করতে পারেন।

উদাহরণস্বরূপ, উপাদানের আকার অনুসারে পতাকা স্কেলের সম্পূর্ণ আকার তৈরি করতে, কিন্তু বক্ররেখার উচ্চতা স্থির রাখতে, আপনি নিম্নলিখিতগুলি করতে পারেন:

.flag {
  clip-path: shape(from 0% 20px,
     curve to 100% 20px with 25% 0% / 75% 40px,
     vline to calc(100% - 20px),
     curve to 0% calc(100% - 20px) 
           with 75% 100% / 25% calc(100% - 40px),
     close
  );
}

কাস্টম বৈশিষ্ট্য এবং অ্যানিমেশন যোগ করুন

এখন সিএসএস-এ সংজ্ঞায়িত আকৃতির সাথে, আপনি উচ্চতা ম্যানিপুলেট করা সহজ করতে কাস্টম বৈশিষ্ট্যগুলিও ব্যবহার করতে পারেন:

.flag {
  --wave-height: 40px;
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height) 
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height))
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

এমনকি আপনি @property বর্ণনাকারী ব্যবহার করে CSS প্রপার্টি অ্যানিমেট করতে পারেন এবং এটিকে ক্ল্যাম্প করতে পারেন যাতে এটি ওভাররিচ না হয়:

@property --animated-wave-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 40px;
}

@keyframes curve {
  from { --animated-wave-height: 0px; }
  to { --animated-wave-height: 180px; }
}

.flag {
  width: 600px;
  height: 400px;
  background: green;
  animation: curve 1s infinite alternate;
  --wave-height: calc(min(var(--animated-wave-height, 40px), 40%));
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height)
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height)) 
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

ডেমো চেষ্টা করুন

Chrome 135 বা Safari 18.4-এ, আপনি এই CodePen ডেমোতে clip-path: shape() ব্যবহার করে তৈরি অ্যানিমেটিং পতাকা আকৃতি দেখতে পারেন।

সারাংশ

clip-path: shape() আপনাকে নির্বিচারে এবং প্রতিক্রিয়াশীল আকার ব্যবহার করে আপনার উপাদান ক্লিপ করতে দেয়, পূর্বে শুধুমাত্র কনিক গ্রেডিয়েন্ট বা জাভাস্ক্রিপ্ট-নির্মিত SVG এর মত কৌশল ব্যবহার করে সম্ভব।

সম্পূর্ণ সিনট্যাক্সের জন্য স্পেসিফিকেশন চেক করুন।

এই মুহূর্তে, এটি শুধুমাত্র clip-path জন্য কাজ করে। ভবিষ্যতে, আমরা উপাদানের সীমানার আকৃতি সেট করার জন্য এই ধরনের আকৃতি ব্যবহার করার কল্পনা করি, যা প্রকাশের আরও অ-আয়তাকার উপায়গুলি আনলক করবে।