ဖန်တီးခြင်း - CSS အကြိတ်

စီးပွားရေး CSS ကို အသုံးပြုခြင်း လေ့လာခြင်းမည့်

ညာဘယ်အရပ်သို့သွားသည့် အကြိတ်:

ဘယ်အရပ်သို့သွားသည့် အကြိတ်:

အထက်သို့သွားသည့် အကြိတ်:

အောက်သို့သွားသည့် အကြိတ်:

အကြိတ်တွေ ကို ဖန်တီးခြင်းမည့်

ပထမပိုင်း - စီးပွားရေး HTML ထပ်ပေးခြင်း:

<p>ညာဘယ်အရပ်သို့သွားသည့် အကြိတ်: <i class="arrow right"></i></p>
<p>ဘယ်အရပ်သို့သွားသည့် အကြိတ်: <i class="arrow left"></i></p>
<p>အထက်သို့သွားသည့် အကြိတ်: <i class="arrow up"></i></p>
<p>အောက်သို့သွားသည့် အကြိတ်: <i class="arrow down"></i></p>

ဒုတိယပိုင်း - စီးပွားရေး CSS ထပ်ပေးခြင်း:

.arrow {
  border: solid black;
  border-width: 0 3ပမာဏ 3ပမာဏ 0;
  display: inline-block;
  padding: 3ပမာဏ;
}
.right {
  transform: သဘောပြောင်း(-45ဒီဂရီ);
  -webkit-transform: သဘောပြောင်း(-45ဒီဂရီ);
}
.left {
  transform: သဘောပြောင်း(135ဒီဂရီ);
  -webkit-transform: သဘောပြောင်း(135ဒီဂရီ);
}
.up {
  transform: သဘောပြောင်း(-135ဒီဂရီ);
  -webkit-transform: သဘောပြောင်း(-135ဒီဂရီ);
}
.down {
  transform: သဘောပြောင်း(45ဒီဂရီ);
  -webkit-transform: rotate(45deg);
}

亲自试一试