CSS Shapes: CSS ব্যবহার করে বিভিন্ন আকার তৈরি করা

CSS ব্যবহার করে যেকোনো আকার তৈরি করা সম্ভব। এই টিউটোরিয়ালে বেসিক থেকে অ্যাডভান্সড আকারগুলো কোড সহ দেখানো হয়েছে।

১. রেক্ট্যাঙ্গেল এবং স্কোয়ার

.rectangle { width: 2rem; height: 4rem; background-color: violet; }
.square { width: 5rem; height: 5rem; background-color: lime; }

২. সার্কেল (বৃত্ত)

.profile-image { 
  width: 100px; 
  height: 100px; 
  border-radius: 50%; 
  background-image: url('image.jpg'); 
  background-position: center; 
  background-size: cover; 
}

border-radius: 50% বর্গাকারকে বৃত্তে রূপান্তরিত করে। Oval-এর জন্য width ≠ height রাখুন।

৩. প্যারালেলোগ্রাম

.parallelogram { 
  color: ivory; 
  width: 6rem; 
  height: 1.5rem; 
  transform: skew(-20deg); 
  background: indianred; 
}

transform: skew() ব্যবহার করে আকার টेढ়া করা হয়। টেক্সট ইফেক্টের জন্য উপযোগী।

৪. ট্রায়্যাঙ্গেল (ত্রিভুজ)

.triangle { 
  width: 0; 
  height: 0; 
  border-left: 2rem solid transparent; 
  border-right: 2rem solid transparent; 
  border-bottom: 5rem solid hotpink; 
}

বর্ডার ট্রিক ব্যবহার করে ত্রিভুজ তৈরি করা হয়। চारों বর্ডারের রঙ এবং প্রস্থ নিয়ন্ত্রণ করে দিক পরিবর্তন করা যায়।

৫. হার্ট (হৃদয় আকার)

.heart { 
  width: 10rem; 
  background: radial-gradient(circle at 60% 65%, goldenrod 64%, transparent 65%) top left,
              radial-gradient(circle at 40% 65%, goldenrod 64%, transparent 65%) top right,
              linear-gradient(to bottom left, goldenrod 43%, transparent 43%) bottom left,
              linear-gradient(to bottom right, goldenrod 43%, transparent 43%) bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}
.heart::before { content: ""; display: block; padding-top: 100%; }

::before pseudo-এলিমেন্ট এবং গ্রেডিয়েন্ট ব্যবহার করে হার্ট আকার।

৬. পলিগন এবং ক্লিপ-পাথ (Polygon & Clip-Path)

.letter-t { 
  width: 5rem; 
  height: 5rem; 
  shape-outside: polygon(0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20%);
  clip-path: polygon(0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 80%, 40% 20%, 10% 20%);
  background: navajowhite; 
}

clip-path এবং polygon() ফাংশন ব্যবহার করে যেকোনো জটিল আকার তৈরি করা যায়। Clippy টুল ব্যবহার করে কোড জেনারেট করুন।

উপসংহার

CSS Shapes: border-radius (circle), transform: skew (parallelogram), border trick (triangle), gradient + pseudo-elements (heart), clip-path + polygon (complex shapes)। এগুলো মাস্টার করে যেকোনো আকার তৈরি করা সম্ভব।