ایجاد مثلث با کد css در طراحی قالب وردپرس

به احتمال زیاد در هنگام کدنویسی و طراحی قالب وردپرس با اشکال هندسی در طرح رابط کاربری یا همان psd قالب برخورد کرده اید، برای پیاده سازی اشکال هندسی چند راه وجود دارد که به اختصار هر کدام را شرح میدهیم. روش اول استفاده از فونت آیکون ها میباشد که اگر سایر ایکون و تصاویر پوسته در مجموعه فونت آیکون موجود هستند میتوانید از فونت آیکون برای نمایش ایکونهای بخشهای مختلف رابط کاربری استفاده کنید. روش دوم بکارگیری div و اختصاص تصویر به عنوان تصویر زمینه div می باشد که میتوان با تعیین موقعیت position:absolute بخش را جابه جا کرد. اما بهترین روش ایجاد مثلث با کد css است زیرا توسط چند خط کد ساده امکان ساخت مثلث و سایر اشکال هندسی فراهم میشود درنتیجه سرعت بارگذاری پوسته افزایش می یابد. در این مطلب از روناک وب به آموزش و معرفی کدهای css و html لازم جهت ساخت مثلث های مکان نما راست، چپ، بالا و پایین می پردازیم پس تا انتها همراه ما باشید.

ایجاد مثلث با کد css در طراحی قالب وردپرس

آموزش کشیدن و ایجاد مثلث با کد css و html

همینطور که میدانید مثلث سه ضلعی و شبیه پیکان دارای نوک تیز میباشد توسط کدهای زیر و با اختصاص کلاس تعریف شده به div میتوانید مثلثهایی بسازید که نوک پیکان آن روبه بالا (کلاس arrow-up)، پایین (کلاس arrow-down)، راست (کلاس arrow-right) یا چپ (کلاس arrow-left) است.

// html codes
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
// css codes
.arrow-up{
width: 0; height: 0; 
border-left: 5px solid transparent;border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down{
width:0;height:0; 
border-left: 20px solid transparent;border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right{
width: 0;height: 0; 
border-top: 60px solid transparent;border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left{
width:0;height:0; 
border-top: 10px solid transparent;border-bottom: 10px solid transparent;
border-right:10px solid blue; 
}

برای تغییر رنگ مثلث باید کد رنگ اختصاص داده شده به border را تغییر دهید اگر میخواهید اندازه انرا نیز کنترل کنید میتوانید مقدار هر border را تغییر دهید.

346 بازدید بدون نظر
خیلی خوشم اومد.
به نظر من !!!

با عضوت در خبرنامه ایمیلی جدیدترین مطالب و فیلم های آموزشی را در ایمیل تان دریافت کنید. اعضاء خبرنامه و صفحات اجتماعی روناک وب از امکانات ویژه ای برخوردار خواهند شد !!!