ساخت مثلث با استفاده از CSS
توسط: امید
درودی مجدد.
برای اولین آموزش در وبلاگم خواستم یک کار خلاقانه برای ایجاد یک مثلث متساوی الاضلاع بدون استفاده از تصویر، فقط با استفاده از CSS 2 آموزش بدم.
به احتمال زیاد با Border ها در CSS کار کرده اید و شاید تاکنون به نوع دقیق عملکرد و ساخت حاشیه کادر توجه نکرده باشید.
در زیر یک DIV را مشاهده میکنید که حاشیه های آن به رنگ های مختلفی در آمده اند و یک حاشیه بزرگ ۲۰px ای دارند و میتوانید با نحوه پردازش مرورگرتان به منظور رسم border در صفحه آشنا بشید:
کد نمونه بالا:
<style> .gholi{ height: 50px; width: 50px; margin:0 auto; border: 20px solid #b7b917; border-left-color: #b61414; border-right-color: #1573b5; border-top-color: #2abd4c; } </style> <div class="gholi"></div>
فکر کنم تا الان ماجرا براتون شفاف شده باشه که چطوری میتونید اون مثلث رو بسازید.
حالا کافیه عرض و ارتفاع مثال بالا رو صفر کنیم تا با چهار عدد مثلث تساوی الاضلاع روبرو بشیم:
کد نمونه بالا:
<style> .gholi1{ height: 0px; width: 0px; margin:0 auto; border: 20px solid #b7b917; border-left-color: #b61414; border-right-color: #1573b5; border-top-color: #2abd4c; } </style> <div class="gholi1"></div>
اکنون برای رسم تنها یک مثلث باید به تمام اضلاع مثلثمون حاشیه ضخیم بدهیم و حاشیه های کجاور حاشیه مدنظرمون رو به رنگ شفاف (transparent) در آورده و حاشیه مقابل را حذف کنیم:
کد نمونه بالا:
<style> .gholi2{ height: 0px; width: 0px; margin: 0 auto; border: 100px solid #b61414; border-left-color: transparent; border-right-color: transparent; border-bottom: none; } </style> <div class="gholi2"></div>
توجه داشته باشید که شاید این روش بهینه نباشد ولی برای افرادی که علاقه دارند سایتشون از تصاویر کمتری استفاده کنه این ترفند بسیار جالب خواهد بود 🙂
موفق و پیروز و سربلند باشید.
:خخخ با دمت جیز ترکوندی
خیلی جالب بود اصلا فک نمیکردم اینقدر ساده باشه 😀