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

Noam Rosenthal

প্রকাশিত: ৮ এপ্রিল, ২০২৫

clip-path প্রপার্টি আপনাকে একটি বৃত্ত, বহুভুজ, এমনকি একটি SVG পাথে ক্লিপ করে একটি উপাদানের আকৃতি পরিবর্তন করতে দেয়। তবে, Chrome 135 এবং Safari 18.4 এর আগে, আপনাকে প্রতিক্রিয়াশীল বহুভুজ এবং আরও জটিল আকারের মধ্যে একটি বেছে নিতে হত যা SVG পাথ ব্যবহার করে প্রতিক্রিয়াশীল নয়। new 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. ০, ২০-এ সরান।
2. নিয়ন্ত্রণ বিন্দু (২৫,০ এবং ৭৫, ৪০) ব্যবহার করে ১০০, ২০-এ বক্ররেখা তৈরি করুন।
3. ৮০ পর্যন্ত উল্লম্ব রেখা।
4. নিয়ন্ত্রণ বিন্দু (৭৫,১০০ এবং ২৫,৫০) ব্যবহার করে ০, ৮০ তে বক্ররেখা তৈরি করুন।
5. পথটি বন্ধ করুন (০,২০ পর্যন্ত লাইন)।

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

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

shape() দিয়ে পতাকা তৈরি করুন।

shape() ব্যবহার করে একই ফলাফল তুলনা করুন। shape ফাংশনটি SVG path কমান্ডের মতো একাধিক কমান্ড গ্রহণ করে। তবে, এই কমান্ডগুলি যেকোনো CSS ইউনিটে CSS দৈর্ঘ্য এবং শতাংশ গ্রহণ করে।

নিম্নলিখিত CSS শতাংশ ইউনিট সহ পতাকাটিকে a 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
  );
}

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

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

.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 এর জন্য কাজ করে। ভবিষ্যতে, আমরা উপাদানের সীমানার আকৃতি নির্ধারণের জন্য এই ধরণের আকৃতি ব্যবহার করার কল্পনা করি, যা প্রকাশের আরও অ-আয়তক্ষেত্রাকার উপায়গুলি আনলক করবে।