Kutengeneza kwa: CSS kichwa cha kibaba

Mwongozo wa kuelewa kuhakikisha kichwa cha kibaba kwa CSS.

Ukiaja kulia:

Ukiaja kushoto:

Ukiaja juu:

Ukiaja chuo:

Kutengeneza kichwa cha kibaba

Kileta ya kwanza - Ongeza HTML:

<p>Ukiaja kulia: <i class="arrow right"></i></p>
<p>Ukiaja kushoto: <i class="arrow left"></i></p>
<p>Ukiaja juu: <i class="arrow up"></i></p>
<p>Ukiaja chuo: <i class="arrow down"></i></p>

Kileta ya pili - Ongeza CSS:

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}
.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

Jifunze kwa kina