Dengan bantuan CSS kita bisa membuat div yang seharusnya berbentuk kotak menjadi bentuk segitiga, hanya perlu sedikit trik dan pemahaman tentang penggunaan border di CSS maka bentuk segitiga bisa kita buat dengan mudah. Pada kesempatan ini bentuk segitiga akan kita kelompokan menjadi dua bagian, yaitu arah panah yang mengarah ke atas, bawah, kanan, kiri. Sedangkan bagian kedua kita akan bermain dengan arah panah ke sudut-sudut, yaitu ke sudut kiri-atas, kanan-atas, kiri-bawah dan kanan-bawah.
Mulai dengan HTML
Pada kelompok pertama (1) kita akan membuat segitiga yang arahnya berbeda-beda yaitu ke-(atas, bawah, kiri, kanan). Pada kelompok kedua (2) segitiga yang arah panahnya ke pojok (kiri-atas, kanan-atas, kiri-bawah, kanan-bawah).
Untuk CSS nya kita buat seperti berikut ini.
/* Triangles
----------------------------*/
.triangles{
overflow: hidden;
padding: 20px;
margin: 20px;
border: 2px solid #000;
}
.triangle{
margin:10px;
float: left;
}
/* Kelompok 1 */
.demo-arrow-up{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #000;
}
.demo-arrow-down{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #333;
}
.demo-arrow-right{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid #ff0;
}
.demo-arrow-left{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right:50px solid #f0f;
}
/* Kelompok 2 */
.demo-topleft{
width: 0;
height: 0;
border-top: 50px solid #333;
border-right: 50px solid transparent;
}
.demo-topright{
width: 0;
height: 0;
border-top: 50px solid #333;
border-left: 50px solid transparent;
}
.demo-bottomleft{
width: 0;
height: 0;
border-bottom: 50px solid #333;
border-right: 50px solid transparent;
}
.demo-bottomright{
width: 0;
height: 0;
border-bottom: 50px solid #333;
border-left: 50px solid transparent;
}
Bisa dilihat disitu, untuk membuatnya kita hanya perlu bermain dengan border, border itu ada
border-top, border-right, border-bottom, border-left.
Jika semuanya kita pakai maka yang akan terbentuk adalah persegi, oleh
karena ini diperlukan background yang transparent untuk menghilangkan
bagian-bagianya tertentu agar persegi tadi menjadi bentuk segitiga.
Bagian lain yang perlu dilihat dari CSS itu adalah setiap bentuk menggunakan
width:0 dan height:0, jadi disitu kita hanya memanfaatkan lebar dari border
