CSS clip-path জেনারেটর

CSS clip-path জেনারেটর কী?

CSS clip-path জেনারেটর হলো CSS clip-path প্রপার্টির জন্য একটি বিনামূল্যের ভিজ্যুয়াল এডিটর, যা সেইসব ফ্রন্ট-এন্ড ডেভেলপার ও ডিজাইনারদের জন্য তৈরি যারা উপাদানগুলোকে অ-আয়তাকার আকৃতিতে কাটতে চান। ড্রপডাউন থেকে একটি প্রিসেট বেছে নিন — ব্যাসার্ধ ও কেন্দ্রবিন্দুসহ circle() ও ellipse(), যত খুশি শীর্ষবিন্দুসহ polygon(), চারটি প্রান্ত অফসেটসহ inset(), অথবা কোণার ব্যাসার্ধসহ একটি rounded inset() রূপ। প্রতিটি প্যারামিটার একটি শতাংশ যা সংখ্যা ইনপুটের মাধ্যমে দেওয়া হয়, এবং দাবার ছকের পটভূমিযুক্ত একটি প্রিভিউ বক্স ফলাফল আকৃতিটি রিয়েল টাইমে দেখায়। সম্পূর্ণ clip-path CSS আপনার কপি করার জন্য তৈরি হয়। ছবি মাস্ক করতে, কর্ণাকার সেকশন বিভাজক কাটতে, ষড়ভুজ অবতার তৈরি করতে, কিংবা স্থানাঙ্ক হাতে গুনে না দেখে স্পিচ-বাবল আকৃতি গড়তে এটি ব্যবহার করুন।

CSS clip-path জেনারেটর কীভাবে ব্যবহার করবেন

1. প্রিসেট ড্রপডাউন থেকে একটি আকৃতি বেছে নিন: circle, ellipse, polygon, inset বা round।
2. circle বা ellipse-এর জন্য, ব্যাসার্ধ (বা X/Y ব্যাসার্ধ) এবং কেন্দ্রের X/Y অবস্থান শতাংশে সেট করুন।
3. polygon-এর জন্য, প্রতিটি শীর্ষের X ও Y শতাংশ সম্পাদনা করুন; আরও শীর্ষ যোগ করতে বিন্দু যোগ করুন-এ ক্লিক করুন এবং মান সম্পাদনা করে পুনরায় সাজান।
4. inset বা round-এর জন্য, উপর, ডান, নিচ ও বাম অফসেট সেট করুন; round একটি কোণার ব্যাসার্ধও নেয়।
5. টাইপ করার সময় লাইভ প্রিভিউকে বক্স কাটতে দেখুন।
6. তৈরি হওয়া clip-path CSS কপি করুন এবং এটি আপনার স্টাইলশিটে পেস্ট করুন।

উদাহরণ

প্রিসেট circle, ব্যাসার্ধ 50%, কেন্দ্র 50% 50%

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

প্রিসেট polygon, বিন্দু (50,0) (100,100) (0,100)

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

প্রিসেট round, সব দিকে inset 10%, কোণার ব্যাসার্ধ 20%

clip-path: inset(10% 10% 10% 10% round 20%);

সচরাচর জিজ্ঞাসিত প্রশ্ন

clip-path কী কাজে ব্যবহৃত হয়?

CSS clip-path প্রপার্টি একটি উপাদানকে একটি মৌলিক আকৃতিতে কেটে দেয়, যাতে কেবল আকৃতির ভেতরের অংশ দৃশ্যমান থাকে। এটি বৃত্তাকার অবতার, কর্ণাকার সেকশন কাট, ষড়ভুজ গ্রিড, ছবি মাস্ক ও স্পিচ বাবলের জন্য দারুণ — আর তা কোনো বাড়তি ছবি বা SVG ফাইল ছাড়াই।

polygon প্রিসেট কীভাবে কাজ করে?

polygon() X/Y শীর্ষবিন্দুর একটি তালিকা ক্রমানুসারে সংযুক্ত করে একটি আকৃতি আঁকে। প্রতিটি বিন্দুর শতাংশ মান সম্পাদনা করুন, এবং আরও শীর্ষ যোগ করতে বিন্দু যোগ করুন ব্যবহার করুন; শেষ বিন্দুটি স্বয়ংক্রিয়ভাবে প্রথম বিন্দুর সাথে যুক্ত হয়। আকৃতি বৈধ থাকার জন্য কমপক্ষে তিনটি বিন্দু রাখা হয়।

মানগুলো শতাংশে কেন?

শতাংশ ক্লিপকে উপাদানের সাথে স্কেল হতে দেয়, তাই একই clip-path যেকোনো আকারে কাজ করে। 0% হলো উপাদানের বক্সের বাম বা উপরের প্রান্ত এবং 100% হলো ডান বা নিচের প্রান্ত।

round প্রিসেট কী যোগ করে?

round প্রিসেট round কোণার ব্যাসার্ধসহ inset() ব্যবহার করে, যা প্রতিটি দিক থেকে ভেতরের দিকে কাটা ও গোলাকার কোণাযুক্ত একটি আয়তক্ষেত্র তৈরি করে — এমন কোমল ফ্রেমযুক্ত কাটার জন্য সুবিধাজনক, যা সাধারণ border-radius কোনো inset ক্লিপের সাথে মেলাতে পারে না।

আমার ডেটা কি কোথাও পাঠানো হয়?

না। জেনারেটরটি সম্পূর্ণরূপে আপনার ব্রাউজারে JavaScript দিয়ে চলে — আপনার আকৃতির মান কখনও আপনার ডিভাইস ছাড়ে না, তাই এটি ব্যক্তিগতভাবে কাজ করে এবং পেজ লোড হওয়ার পর অফলাইনেও।