آموزش ساخت مثلث با کد 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;}
