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.

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





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

6 thoughts on “Membuat Bentuk Segitiga Dengan CSS

  1. demonya mana bang?

  2. Windu says:

    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

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development