Real Time Web Analytics کانال تلگرام لرن روت

CSS

ایجاد یک مثلث با CSS

نویسنده : محمد مظفری
تاریخ انتشار:
12:28:26 1394-06-16
ایجاد مثلث به کمک CSS ,  طراحی مثلث با HTML

شاید برای شما هم پیش آمده باشد که بخواهید با HTML و CSS یک مثلث ایجاد کنید. برای آموزش این موضوع  با لرن روت در این مقاله همراه باشید.

آموزش ایجاد مثلث به وسیله HTML و CSS ؟

ابتدا در فایل HTML خود بصورت زیر عمل کنید:

<div id="triangle-up"></div>

حال ما می خواهیم یک مثلث بکشیم که رو به بالا باشد. 
سپس در فایل CSS به صورت زیر عمل کنید:

توجه داشته باشید که می خواهیم مثلث رو به بالا باشد.

#triangle-up{
	width: 0;
	height: 0;
	border-bottom: 100px solid red;
	border-right: 100px solid blue;
	border-left: 100px solid blue;
}

در اینجا در CSS یک مستطیل برای شما ترسیم می کند که یک مثلث قرمز رنگ به سمت پائین وجود دارد. 

و اما نکته ی مهمش

  • هر سمتی که می خواهید مثلث به آن سمت باشد باید دو ضلع چپ و راست آن را هم استایل بدهید. مثلا در اینجا ما می خواستیم مثلث به سمت بالا باشد پس دو ضلع سمت چپی و سمت راستی باید استایل داده شوند و اگر بخواهیم مثلث به سمت چپ باشد باید دو ضلع بالایی و پائینی استایل داده شوند. ضلع مخالف هم باید رنگی که می خواهید مثلثتان داشته باشد را بدهید.
  • اندازه بردارها را هم باید اندازه باشند وگرنه مثلث کشیده میشود.
  • می توانید برای اضلاع سمت چپی و سمت راستی (نسبت به نوک مثلث) که دارید به آنها استایل می دهید به جای رنگی خاص با استفاده از transparent از رنگ والد آن استفاده کنید...

 

	(( html ))
<div id="triangle-left"></div>
	(( CSS ))
#triangle-left{
	width: 0;
	height: 0;
	border-top: 100px solid transparent;
	border-right: 100px solid blue;
	border-bottom: 100px solid transparent;
}

 

برچسب ها:
مقالات مشابه