Membuat Bentuk Segitiga Dengan CSS

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.

Image by Sarah @ pingsandneedles

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

Sumber