تابز مدیا | آموزش قدم به قدم برنامه نویسی

CSS Image Shapes

به صورت پیش‌فرض، تصاویر در CSS به صورت مستطیل یا مربع نمایش داده می‌شن. اما با استفاده از ویژگی‌هایی مثل border-radius و clip-path می‌تونیم تصاویر رو به شکل‌های مختلف دربیاریم.

🔹 ۱. گرد کردن گوشه‌ها (Rounded Images)


img {
  border-radius: 15px;
}

🔸 گوشه‌های تصویر گرد می‌شن.

🔹 ۲. دایره (Circle)


img {
  border-radius: 50%;
}

🔸 تصویر مربع رو به صورت دایره نمایش می‌ده. (برای مستطیل، بیضی می‌شه)

🔹 ۳. بیضی (Ellipse)


img {
  border-radius: 50% 25%;
}

🔹 ۴. اشکال سفارشی با clip-path

با خاصیت clip-path می‌تونیم شکل‌های پیچیده‌تری برای تصویر بسازیم:

🔸 مثلث


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

🔸 ستاره ⭐


img {
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 
    68% 57%, 79% 91%, 50% 70%, 
    21% 91%, 32% 57%, 2% 35%, 
    39% 35%
  );
}

🔸 دایره با clip-path


img {
  clip-path: circle(50%);
}

🔹 ۵. اشکال آماده با `shape-outside`

این ویژگی برای قرار دادن متن اطراف تصویر در اشکال خاص استفاده می‌شه:


img {
  float: left;
  shape-outside: circle(50%);
  clip-path: circle(50%);
}

✅ نکته مهم: