• 1 رای - 5 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
[آموزش] - با CSS مثلث های خوشگل موشگل درس کنیم
#1
خداییش این دیگه آخرشه
خیلی حال کردم، دمشون گرم Big Grin Tongue
نه جاوااسکریپتِ ، نه عکس ، اصطلاحا Pure CSS هستش Dodgy

یه span ای div ای چیزی درس کنین
کد پی‌اچ‌پی:
<span id="triangle"></span

حالا CSS بدین Big Grin

1 - مثلث رو به بالا
کد پی‌اچ‌پی:
#triangle {
  
width:0px
  
height:0px
  
border-left:5px solid transparent;
  
border-right:5px solid transparent;
  
border-bottom:5px solid #2f2f2f;


2 - مثلث رو به پائین
کد پی‌اچ‌پی:
#triangle {
  
width:0px
  
height:0px
  
border-left:5px solid transparent;
  
border-right:5px solid transparent;
  
border-top:5px solid #2f2f2f;


3 - مثلث رو به راست
کد پی‌اچ‌پی:
#triangle {
  
width:0px
  
height:0px
  
border-bottom:5px solid transparent
  
border-top:5px solid transparent;
  
border-left:5px solid #2f2f2f;



4 - مثلث رو به چپ
کد پی‌اچ‌پی:
#triangle {
  
width:0px
  
height:0px
  
border-bottom:5px solid transparent
  
border-top:5px solid transparent;
  
border-right:5px solid #2f2f2f;


به جای رنگ transparent می تونین از rgba هم استفاده کنید ، یعنی مثلا اینجوری

کد پی‌اچ‌پی:
border-bottom:5px solid rgba (0000); 

Big Grin Dodgy



اگه حوصله کد زدن هم نداشتین، برین به سایت زیر تا خودش براتون مثلثای css ای درس کنه Smile

CSS Triangle Generator
W H A T E V E R   Sleepy 
  پاسخ
تشکر شده توسط : Y.P.Y cyletech Hamid Bojbaj takphp Mr.Javad


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان