امید پیله ور

درودی مجدد.

برای اولین آموزش در وبلاگم خواستم یک کار خلاقانه برای ایجاد یک مثلث متساوی الاضلاع بدون استفاده از تصویر، فقط با استفاده از 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>

توجه داشته باشید که شاید این روش بهینه نباشد ولی برای افرادی که علاقه دارند سایتشون از تصاویر کمتری استفاده کنه این ترفند بسیار جالب خواهد بود 🙂

موفق و پیروز و سربلند باشید.