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

css-trangle
سلام. امروز با یک آموزش کاربردی از سی اس اس اومدم. خوب توی سی اس اس ساخت مربع و مستطیل رو همه بلد هستند. اما ساخت مثلث که بعضی اوقات لازم میشه رو خیلی ها نمدونند و به همین خاطر از تصویر استفاده میکنند.
برای ایجاد مثلث ما از سی اس اس استفاده میکنیم. خوب مثلث چهار حالت داره از لحاظ شکلی که من با توجه به جهت راس اون استایل نویسی رو انجام دادم، ابتدا استایل برای مثلثی رو مینویسیم که جهت راس اون به سمت چپ باشه، بدین شکل که ابتدا در قسمت اچ تی ام ال خودمون یک div با کلاس arrow-left ایجاد میکنیم:

<div class="arrow-left"></div>

حالا استایل مورد نظرمون رو مینویسیم:

.arrow-left {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-right:50px solid #1F749C;
}

برای تغییر اندازه مثلث باید مقدار های ۵۰ رو تغییر بدید و برای تغییر رنگ مثلث نیز مقدار #۱F749C رو تغییر بدید، به همین سادگی. حالا استایل برای حالت های دیگر مثلث رو میگم واسه تازه کار ها:
اگر میخوای جهت راس مثلث رو به بالا باشد:

.arrow-up {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 50px solid #1F749C;
}

اگر میخوای جهت راس مثلث رو به پایین باشد:

.arrow-down {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 50px solid #1F749C;
}

اگر میخوای جهت راس مثلث سمت راست باشد:

.arrow-right {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 50px solid #1F749C;
}

امیدوارم براتون کاربردی باشه.

6 پاسخ به “ایجاد مثلث با استفاده از سی اس اس”

  1. ساسان می‌گه:

    عالیییییییییییییی

  2. لادن می‌گه:

    واااااااای نجاتم دادین ….. ممنونم خیلی زیاد

  3. محمد مهدی افقری می‌گه:

    ممنون ازتون واقعاً لازمم بود

پاسخ دهید

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

آخرین محصولات فروشگاه
برخی مطالب تصادفی مای دیزاین
ساخت انعکاس عکس در فتوشاپ
مجموعه تصویر زمینه وبسایت روشن (سری دوم)
ایجاد سایه درونی با استفاده از CSS
کد های کاربردی وردپرس (قسمت دوم)
ایجاد انیمشین با استفاده از CSS
قالب های وردپرس را قورت دهید!