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)
<p>Kelompok 1</p>
<div class="triangles">
<div class="triangle demo-arrow-up"></div>
<div class="triangle demo-arrow-down"></div>
<div class="triangle demo-arrow-left"></div>
<div class="triangle demo-arrow-right"></div>
</div>
<p>Kelompok 2</p>
<div class="triangles">
<div class="triangle demo-topleft"></div>
<div class="triangle demo-topright"></div>
<div class="triangle demo-bottomleft"></div>
<div class="triangle demo-bottomright"></div>
</div>
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
Hasil / Demo
Maka hasil yang akan didapat adalah seperti berikut ini.
Kelompok 1
Kelompok 2
DOWNLOAD
Jika kamu tertarik mencobanya, bisa copy script diatas atau download kode nya di sini.
Sekian
Salam Web Design Indonesia
demonya mana bang?
Itu kan ada demo nya dibagian hasil, itu div lho segitiganya, bukan gambar
brarti teknik ini blm bisa bwt segitiga yg cuma garisnya aj ya min???
harus full background kyk contohnya itu ya…
bisa aja, itu mah tergantung tekniknya aja, bisa aja segitiga pertama ditiban dengan segitiga kedua yang ukurannya lebih kecil dan warnanya sama dengan background agar mendapat kesan seperti border
keren ..euy.
Thanks gan….
Terimakasih Gan Telah Memberi Informasi, Semoga Artikel ini Bermanfa,at Amin.
Thanks Gan Artikelnya , Pokoknya Jempoool.