ခုနကေလးတင္ ညီေတာ္ alt က CSS နဲ႔ Triangle လုပ္ၿပမလားလို႔ေမးတယ္။
ကြ်န္ေတာ္က ၿငင္းေတာ့မၿငင္းခဲ့ဘူး။ ဒါေပမယ့္ လုပ္လို႔မရဘူးေတာ့ ထင္ခဲ့တာ။
ေနာက္ေတာ့ သူကဘဲ ဖိုရမ္ထဲက သူ႔ပိုစ့္တစ္ခုၿပရင္းနဲ႔ ကြ်န္ေတာ္ ေရးေပးဖူးတဲ့ Flame Effect ေလး လုပ္တုန္းက Multiple Shadow သံုးတာကို အမွတ္ရသြားတယ္။

Code:

http://www.myanmaritresource.info/cascading-style-sheet-f30/multiple-text-shadow-flaming-text-with-css-3-tips-tricks-t3097.htm

Border Color မွာေကာ အဲလို Multiple လုပ္လုိ႔ရပါ့မလားလို႔ ကြ်န္ေတာ္ စဥ္းစားၾကည့္ၿပီးေတာ့ ခ်က္ခ်င္းစမ္းမိသြားတယ္။
တကယ္ရသဗ်ာ။

ကဲ ဘယ္လိုရသလဲဆုိတာ ၾကည့္ရေအာင္ဗ်ာ.....

ဒါကေတာ့ HTML Code ပါ။

Code:

<div class="Triangle"></div>

ဒါကေတာ့ CSS code ေပါ့

Code:

.Triangle {
  border-style:solid;
  border-color: black black white black;
  border-width:50px;
  width: 0;
  height: 0;
}

တကယ္ေတာ့ CSS code အားလုံးက ဒီေနရာမွာ အသက္ပါ။
တစ္ခ်က္ခ်င္းရွင္းၿပေပးပါမယ္။
border-style:solid;
သူကေတာ့ ကြ်န္ေတာ္တုိ႔ ေအာက္က Link မွာ

Code:

http://www.myanmaritresource.info/cascading-style-sheet-f30/border-effect-using-css-combine-shadow-text-tips-tricks-t3113.htm#15622

ေဆြးေႏြးခဲ့တဲ့ Border Style ေတြထဲက တစ္ခုကို သံုးထားတာပါ။ ဘာေၾကာင့္သံုးလည္းဆုိတာေတာ့ ေအာက္တြင္ဆက္ရႈ။

border-color: black black white black;
Border ရဲ႕ အေ၇ာင္ကို Multiple သံုးလိုက္ပါတယ္။
ကြ်န္ေတာ္က ၾတိဂံ အတည့္လိုခ်င္ေတာ့ တတိယေၿမာက္မွာ အၿဖဴေရာင္ထားလိုက္ပါတယ္။ (Bg က နဂိုကတည္းက အမည္းဆုိေတာ့ ၾတိဂံေပၚဖို႔ အၿဖဴသံုးလိုက္တာပါ။)
ဘာလို႔ တတိယေၿမာက္မွာထည့္တယ္ဆုိတာေတာ့ CSS ရဲ႕ padding or border rule အတုိင္းဘဲေပါ့။ အေပၚ ၊ ညာ ၊ ေအာက္ ၊ ဘယ္ အတုိင္းသြားပါတယ္။

border-width:50px;
ဒါကလည္း တကယ္အေရးၾကီးပါတယ္။ Border ရဲ႕ width ကို ၾကီးၾကီးထားလိုက္မွ ကြ်န္ေတာ္တုိ႔ ၿမင္ရမွာၿဖစ္ပါတယ္။

width: 0;
height: 0;
အစက အဲဒီ့ႏွစ္ခုမပါဘဲ ကြ်န္ေတာ္ သြားစမ္းတာ စိတ္ဓါတ္ေတာင္ က်သြားတယ္
ဘယ့္ႏွယ္ ၾတိဂံလုပ္ပါတယ္ဆုိ ၊ Dock လာေပၚရတာလဲလို႔။ (ဒါေပမယ့္ အဲဒီ့မွာလည္း Tricks တစ္ခုရသြားၿပန္ေသးတယ္၊)
အဲဒီ့ ႏွစ္ခုကေတာ့ width ေကာ height ေကာ ခ်ံဳ႕လုိက္ခ်င္းအားၿဖင့္ ကာလာေတြပူးေပါင္းၿပီးေသးေသးေလးၿဖစ္သြားေစတာပါ။

ကဲ ၊ ရွင္းတာ နားလည္မလည္ေတာ့မသိဘူး။ ကြ်န္ေတာ္ကေတာ့ အေပ်ာ္လြန္ၿပီးေရးမိသြားၿပီ။

ေအာ္ နမူနာ ေမ့သြားၿပန္ၿပီ။

Code:

http://www.myanmaritresource.info/outsider-h16.htm

outsider ေလးရဲ႕ Page မွာဘဲ ၀င္ေရးထားပါတယ္။

အေပ်ာ္လြန္ၿပီး Release လုပ္လုိက္မိတာ။ ဟီး။
ခုမွ Google လုပ္မိေတာ့ ၊ အုိးအုိး.. ကိုယ့္ထက္ အရင္ေတြ႔ထားတဲ့သူေတြ မနည္းပါလား။
အင္းေပါ့ေလ။ ဒါေၾကာင့္လည္း နည္းပညာေရစီးက သူတို႔ဘက္က စီးေနတာကိုး...

အဲဒီ့မွာ ကြ်န္ေတာ့္ထက္ ေကာင္းတဲ့ coding style ေတြ ၊ thinking ေလးေတြ ေတြ႔မိလို႔ အေကာင္းဆုံး တစ္ခုကို ရွဲလုိက္ပါတယ္။

Code:

<div class="newT"></div>

Code:

.newT {
   width:0;
   height:0;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-top: 0;
   border-bottom: 30px solid red;
}

width:0; height:0; ကေတာ့ ဘာေၾကာင့္ဆုိတာ အေပၚမွာ သိၿပီးေလာက္ပါၿပီ။

border-left: 20px solid transparent;
border-right: 20px solid transparent;
ဒီ ၂ ခု ကို ရွင္းေပးမယ္။
ကြ်န္ေတာ္ အေပၚမွာတုန္းက solid လုပ္ၿပီးေတာ့ အလြယ္တကူလုပ္လုိက္ၿပီး BG နဲ႔ ေရာၿပီး ေဖ်ာက္လိုက္တာ။ အကယ္လို႔မ်ား BG ေလးနည္းနည္း လြဲသြားတာနဲ႔ ကြ်န္ေတာ့္ ၾတိဂံက ပလံုၿပီ။
အခု ဒီ နည္းေလးေတာ့ မဆုိးဘူး။ transparent လုပ္လုိက္ေတာ့ ဘယ္ BG color နဲ႔ ၿဖစ္ၿဖစ္ အဆင္ေၿပတယ္။ ပိုၿပီးေတာ့ စိတ္ခ်ရတယ္။

border-top: 0;
ဒါကေတာ့ ၾတိဂံ ထိပ္ၿဖစ္ပါမယ္။ အဲဒီ့မွာ 0 ထားထားတဲ့ အတြက္ သူက အခြ်န္ေလး auto ၿဖစ္ေနပါလိမ့္မယ္။

border-bottom: 30px solid red;
ဒါကေတာ့ ၾတိဂံေအာက္ေၿခေပါ့။ 30px ထားထားၿပီးေတာ့ ကာလာ ၿဖည့္လိုက္တဲ့အခါမွာ top နဲ႔ သြားေပါင္းလိုက္ၿပီးေတာ့ ၊ right & left က transparent ၿဖစ္ေနေတာ့ အဆုံးမွာေတာ့ ပိုမိုေကာင္းမြန္တဲ့ ၾတိဂံေလးရၿပီေပါ့။

သူ႔ထက္ေကာင္းတာေတာင္ သူ႔ေလာက္မေကာင္းဘူး။
CSS က limit မရိွပါလား။ လုပ္ခ်င္သလို လုပ္လို႔ရေနတယ္။

ကဲ ဟိုး... အေပၚဆုံးက ကြ်န္ေတာ္ စစေတြ႔ခဲ့တဲ့ Tricks မွာ ထပ္ၿဖည့္ေပးမယ္။
ဒီတစ္ခါကေတာ့ ကိုယ့္ဟာကိုယ္ ထပ္လုပ္ၾကည့္ရင္းရလာတာ။

ေအာက္က Code ေလးကို ေၿပာင္းလုိက္။ Border Color ေတြ Transparent လုပ္လိုက္တာ။

Code:

  border-color: transparent transparent white transparent;

အဲလိုလုပ္လိုက္ေတာ့ Bg ေၿပာင္းလဲ တို႔မေၿပာင္းဆုိသလိုေပါ့။

ဒုတိယနည္းထက္လည္း ပိုလြယ္တယ္။ ပိုလည္းရွင္းတယ္။ ပိုလည္းတုိတယ္။