Selamat siang teman, gimana kabarnya?

Kali ini kita akan belajar membuat segitiga menggunakan css. Jika biasanya kita mungkin menggunakan gambar dalam mengiasi website kita, tidak ada salahnya kita belajar menggunakan css.

Lansung saja, silakan buat sebuah class bisa juga id pada halaman html, contoh:

<div class="segitiga"></div>

Disini saya menggunakan class, jika temen-temen ingin menggunakan id juga tidak masalah, jika menggunakan id maka,

<div id="segitiga"></div>

Selanjutnya adalah membuat cssnya, seperti ini,

/** untuk cass **/

.segitiga {
	width: 0; 
	height: 0; 
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-bottom: 60px solid blue;
}

Atau jika menggunakan id,

/** untuk id **/

#segitiga {
	width: 0; 
	height: 0; 
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-bottom: 60px solid blue;
}

Penjelasan:

Pada dasarnya ini akan menjadi sebuah bentuk persegi panjang, maka:

border-left: 60px solid transparent;

Digunakan untuk menampilkan border pada bagian kiri, dengan panjang kali lebar sebesar 60px, penggunaan warna transparent digunakan untuk menghilangkan warna pada bagian kiri.

border-right: 60px solid transparent;

Digunakan untuk menampilkan border pada bagian kanan, fungsinya sama seperti penjelasan sebelumnya.

border-bottom: 60px solid blue;

Digunakan untuk menampilkan border dari bawah yang mengerucut ke atas, dengan dibantu oleh dua perintah border diatas sehingga membentuk segitiga dengan warna biru.

Contoh penampakan:

Terima kasih, sekian semoga bermanfaat Sampai jumpa...