آموزش ساخت مثلث با کد css

آموزش ساخت مثلث با کد css

 

سلام . امروز قصد داریم به شما آموزش دهیم که چگونه با کد های CSS یک مثلث ترسیم نماییم. این آموزش در سطح مبتدی میباشد و امیدوارم مورد استفاده قرار بگیرد.

 

آموزش ساخت مثلث با کد css :

ابتدا یک div ایجاد میکنیم و نام کلاس را هر چی دوس داریم میزاریم . ما در اینجا a4fran3 گذاشته ایم

<div class=”a4fran3″></div>

حال در استایل خود این کد وارد میکنیم

.a4fran3 {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-right:60px solid #742b1d;
}
 
برای تغییر اندازه مثلث باید مقدار های 60 رو تغییر دهید و برای تغییر رنگ مثلث کد #742b1d را عوض کنید و رنگ مورد نظر خود را جایگزین کنید
 
 
 
اگر دوست دارید راس مثلث رو به بالا باشد از کد زیر استفاده کنید :
 
.a4fran3 {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid #742b1d;
}
 
 
 
اگر دوست دارید راس مثلث رو به پایین باشد از کد زیر استفاده کنید :

 

.a4fran3 {
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-top: 60px solid #742b1d;
}
 
 
 
 
اگر دوست دارید راس مثلث به سمت راست باشد از کد زیر استفاده کنید :
.a4fran3 {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid #742b1d;
}