در دنیای CSS، زمانی که نیاز دارید عناصر را با اشکال خاص و سفارشی به نمایش درآورید، می‌توانید از خاصیت basic-shape.xywh استفاده کنید. این خاصیت به شما امکان می‌دهد که با استفاده از مقادیری که به صورت x, y, width, height تعریف می‌شوند، به راحتی اشکال مستطیلی ساده‌ای ایجاد کنید.
فرض کنید نیاز دارید که در صفحه خود به جای استفاده از تصاویر یا المان‌های پیچیده، تنها با یک خط کد، شکلی مستطیلی را ترسیم کنید. در چنین شرایطی، basic-shape.xywh بهترین انتخاب برای شما خواهد بود.
این خاصیت باعث می‌شود که شما بتوانید به سرعت اشکال مورد نظر خود را ایجاد کرده و با زوایا و اندازه‌های دلخواه تنظیم کنید. کار با این خاصیت بسیار ساده است و به صورت گسترده در پروژه‌های مختلف کاربرد دارد.
در ضمن، به یاد داشته باشید که این خاصیت در برخی مرورگرها به تازگی پشتیبانی می‌شود، پس همیشه مطمئن شوید که آزمایشات لازم را برای سازگاری آن با مرورگرهای مختلف انجام دهید.
<style>
.rectangle {
clip-path: inset(20px 10px 30px 10px);
background-color: #007BFF;
width: 200px;
height: 100px;
}
</style>
این یک مستطیل است.
این بخش، کد CSS مربوط به ایجاد یک مستطیل با رنگ آبی است. در ادامه توضیحات مربوط به نحوه کار این کد ارائه می‌شود:
<style> - این تگ برای تعریف مجموعه سبک‌های CSS استفاده می‌شود..rectangle - این کلاس برای تعریف سبک‌های مختص به المانی استفاده می‌شود که ما می‌خواهیم شکل مستطیلی به آن بدهیم.clip-path: inset(20px 10px 30px 10px); - این خط برای ایجاد شکل مستطیل با فواصل داخلی ارائه شده است که همان basic-shape.xywh می‌باشد.background-color: #007BFF; - این خط رنگ پس‌زمینه عنصر را به آبی تنظیم می‌کند.width: 200px; - این خط عرض مستطیل را تعیین می‌کند.height: 100px; - این خط ارتفاع مستطیل را تنظیم می‌کند.