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

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;
}

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

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

  1. ساسان گفت:

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

  2. لادن گفت:

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

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

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

  4. حسین گفت:

    سلام مهندس
    ممنون میشم اگه بفرمایید چطور میتونم قطر یک مربع رو بکشم.

    اگه به ایمیلم بفرستید ممنونتون میشم

پاسخ دهید

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

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