با استفاده از CSS و ویژگی clip-path یک تصویر مربع را به شکل شش‌ضلعی (hexagon) برش بزنید به طوری که تصویر داخل شکل کامل نشان داده شود.

برای برش یک تصویر مربع به شکل شش‌ضلعی با clip-path، یک کانتینر مربعی بساز و از background-image با background-size: cover و background-position: center استفاده کن تا تصویر به‌خوبی در مرکز پر شود. مختصات شش‌ضلعی را در clip-path: polygon(...) با درصدها تعریف کن، مثلاً 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50% که یک hexagon متقارن ایجاد می‌کند. برای پشتیبانی گسترده، -webkit-clip-path را هم اضافه کن و می‌توانی از ابزارهای آنلاین برای محاسبه مقادیر دقیق استفاده کنی. در نهایت با استفاده از نسبت ابعاد 1:1 (aspect-ratio: 1 / 1) کانتینر را نگه دار تا هنگام تغییر اندازه، تصویر داخل شکل به‌طور کامل و بدون بریدگی نمایش داده شود.