Daftar isi
Ikon CSS alternatif pengganti web font icons.
Ikon pengganti Web font icons (Font Awesome, Material Icons etc.)
Membuat ikon segitiga dengan CSS
Arah kanan :
<div class='segi3-kanan'></div>
Arah kiri :
<div class='segi3-kiri'></div>
Arah atas :
<div class='segi3-atas'></div>
Arah bawah :
<div class='segi3-bawah'></div>
Segi tiga kanan & kiri
.segi3-kanan {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 10px solid red; /*-- border kiri membentuk sudut arah kanan --*/
border-bottom: 5px solid transparent;
}
.segi3-kiri {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 10px solid red; /*-- border kanan membentuk sudut arah kiri --*/
border-bottom: 5px solid transparent;
}
- Pada segi tiga kanan dan kiri, yang memiliki peran utama sebagai pembentuk visualnya adalah:
- border-top :
berfungsi untuk membentuk sudut atas. - border-left / border-left :
berfungsi menentukan arah kiri / kanan. - border-bottom :
berfungsi untuk membentuk sudut bawah.
- border-top :
- Ketebalan border-top / atas (dalam px) = dengan ketebalan border bawah.
- Ketebalan border-left / border-right >> 2kali ketebalan border atas dan bawah.
- Ketebalan border-bottom / bawah (dalam px) = dengan ketebalan border atas.
Segi tiga atas & bawah
.segi3-atas {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid red; /*- warna ikon -*/
}
.segi3-bawah {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid red; /*- warna ikon -*/
}
Membuat ikon tanda panah dengan CSS
Arah kanan:
<i class='arah kanan'></i>
Arah kiri:
<i class='arah kiri'></i>
Arah atas:
<i class='arah atas'></i>
Arah bawah:
<i class='arah bawah'></i>
.arah {
border: solid red; /*- warna ikon -*/
border-width: 0 3px 3px 0;
display: inline-block;
vertical-align:middle;
padding: 3px;/*-- opsional --*/
margin:7px 10px;/*-- opsional --*/
}
.kanan {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.kiri {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.atas {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.bawah {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}