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

the original post that this guy stole from ma can be found here آموزش ایجاد مثلث با css
read the original and help me out.

سلام دوستان و همراهان عزیز وقت شما بخیر.امیدوارم سالم و سلامت آماده یکی از آموزش های دیگر وردپرس باشید که به شما در انتخاب و کار با وردپرس میتواند بسیار کمک کند و یاری دهنده باشد.پس حتما با من همراه باشید دوستان عزیز.در این آموزش قرار است کمی در مورد ایجاد اشکال با استفاده از زبان css صحبت کنیم و اطمینان داریم این آموزش نیز میتواند روزی برای شما مفید فایده باشد البته شما باید توجه کنید که استفاده از css در تمامی قسمت های کار های وب سایت مورد استفاده است و بسیار بسیار مهم است.پس به این کد نویسی مطمئنا نیاز دارید.

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

دوستان همراه من به احتمال زیاد در هنگام کدنویسی و طراحی قالب وردپرس و همچچنین افزونه های وردپرس با اشکال هندسی در طرح رابط کاربری یا همان psd قالب برخورد کرده اید و شاید نیاز به شکل هایی داشتید که نمیتوانید آن ها را ایحاد کنید، برای پیاده سازی اشکال هندسی چند راه وجود دارد که به اختصار هر کدام را شرح میدهیم.پس حتما با من همراه باشید دوستان عزیز و محترم

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

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

خب دوستان این آموزش وردپرس هم در این قسمت به انتها رسید.خیلی ممنونم از این همراهی شما
در ادامه این آموزش ها هم حتما با من همراه باشید چون آموزش های خوب و حرفه ای برای شما تهیه شده است

موفق و پیروز باشید
منبع: بیگ تم مرجع آموزش وردپرس و قالب وردپرس

نوشته آموزش ایجاد مثلث با css اولین بار در بیگ تم پدیدار شد توسط محمد رضا ملکی از دست ندهید.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>