ကၽြန္ေတာ္ဒီေန႔ ေျပာျပခ်င္တာတစ္ခုကေတာ႔ Css အသံုးျပဳျပီး square နဲ႔ triangle ပံုေတြကိုဆြဲရတာပါ
photoshop သံုးစရာမလိုပဲ႔နဲ႔ Css နဲ႔အလြယ္တစ္ကူေရးသားနိုင္ပါတယ္ coding ေလးကလည္းအလြန္ပဲ႔လြယ္ကူပါတယ္
ဒီလိုမ်ိဳးေလးေပၚေအာင္ေရးၾကည္႔ရေအာင္
photoshop သံုးစရာမလိုပဲ႔နဲ႔ Css နဲ႔အလြယ္တစ္ကူေရးသားနိုင္ပါတယ္ coding ေလးကလည္းအလြန္ပဲ႔လြယ္ကူပါတယ္
ဒီလိုမ်ိဳးေလးေပၚေအာင္ေရးၾကည္႔ရေအာင္
<html>
<body>
<style type="text/css">
.triangle{
border-left:200px solid red;
border-top:200px solid yellow;
border-bottom:200px solid green;
border-right:200px solid blue;
display:inline-block;
}
</style>
<span class="triangle"></span>
</body>
</html>
ပထမဆံုးကၽြန္ေတာ္က span ဆိုတဲ႔ element ထဲမွာ triangle လို႔ေခၚတဲ႔ class တစ္ခုကိုအရင္ေဆာက္လိုက္ပါတယ္
ျပီးေတာ႔ triangle ဆိုတဲ႔ class ကို css နဲ႔ ျပန္ျပီး design ဆင္မွာပါ
line 5 =>border-left:200px solid red ဆိုျပီး သံုးထားပါတယ္ ဒါကကၽြန္ေတာ္တို႔ left border တစ္ခုကို 200 သတ္္မွတ္ထားပါတယ္
line 6 =>border-top:200px solid yellow လို႔လုပ္ထားပါတယ္ ဒါေပမယ္႔ border-left က border-top အေပၚအုပ္ထားပါတယ္'ဒါေၾကာင္႔ yellow border ကိုနည္းနည္းေလးပဲ႔ျမင္မွာပါ
line 7 =>border-bottom:200px solid green လို႔သတ္မွတ္လိုက္ေတာ႔ ဒါကအခုဆိုေစာေစာကေရးထားတဲ႔ left border နဲ႔ခ်ိတ္မိျပီး ႏွစ္ခုေပၚလာပါျပီ
line 8 =>border-right:200px solid blue လို႔ထပ္သတ္မွတ္ပါတယ္အခုဆိုရင္ right border ပါေပၚလာပါျပီ
ဒါေပမယ္႔ အေပၚဆံုးက yellow သတ္မွတ္ထားတဲ႔ border-top ေလးကအျပည္႔မေပၚေသးဘူး
line 9 => ဒီေတာ႔ေနာက္ထပ္ ကၽြန္ေတာ္က display သံုးျပီး အထဲက ဟာေတြကို block လုပ္လို္က္ပါတယ္
ေနာက္ထပ္အေသးစိတ္ေလ႔လာခ်င္ေသးတယ္ဆိုရင္ေတာ႔
ဒါေပမယ္႔ အေပၚဆံုးက yellow သတ္မွတ္ထားတဲ႔ border-top ေလးကအျပည္႔မေပၚေသးဘူး
line 9 => ဒီေတာ႔ေနာက္ထပ္ ကၽြန္ေတာ္က display သံုးျပီး အထဲက ဟာေတြကို block လုပ္လို္က္ပါတယ္
ေနာက္ထပ္အေသးစိတ္ေလ႔လာခ်င္ေသးတယ္ဆိုရင္ေတာ႔
<style>
.top-triangle{border-top: 100px solid yellow;border-right: 100px solid green;display: inline-block;}
.bottom-triangle{border-left: 100px solid red;border-top: 100px solid yellow;display: inline-block;}
.left-triangle{border-top: 200px solid yellow;border-right: 100px solid blue;display: inline-block;}
.right-triangle{border-bottom:100px solid green;border-right: 200px solid blue;display: inline-block;}
.left-right-triangle{border-left: 100px solid red;border-right: 100px solid red;border-top: 100px solid transparent;border-bottom: 100px solid transparent;display: inline-block;}
.top-bottom-triangle{border-left: 100px solid transparent;border-right: 100px solid transparent;border-top: 100px solid green;border-bottom: 100px solid green;display: inline-block;}
</style>
<span class="top-triangle"></span>
<span class="bottom-triangle"></span>
<span class="left-triangle"></span>
<span class="right-triangle"></span>
<span class="left-right-triangle"></span>
<span class="top-bottom-triangle"></span>
ကၽြန္ေတာ္တို႔လိုခ်င္တဲ႔ပံုုစံကို စဥ္းစားျပီး ၾကိဳက္သလိုလုပ္ေဆာင္နိုင္ပါတယ္
နွစ္ခါဖတ္ျပီး တစ္ခါေတြးပါ ျပီးေတာ႔ သံုးၾကိမ္ေရးၾကည္႔႔ပါ ဟီး
Thanks for Reading
Written by Cyberøø†
No comments:
Post a Comment
Thanks for your comments
Welcome from cyberoot