Membuat Bentuk Segitiga Dengan CSS

Selamat datang kembali di tutorial css di siapngoding.my.d. Beberapa waktu lalu ada beberapa teman-teman pembaca tutorial di siapngoding.my.id yang meminta untuk dibuatkan tutorial tentang cara membuat bentuk segita menggunakan CSS.

Jadi untuk melengkapi materi CSS di siapngoding.my.id, pada tutorial kali ini kita akan membahas tentang cara membuat segitiga dengan menggunakan CSS.

Silahkan simak penjelasan berikut.

Membuat Bentuk Segitiga Dengan CSS

Oke, langsung saja kita masuk ke pembahasan.

Membuat Bentuk Segitiga Dengan CSS

Untuk membuat bentuk segitiga, kita bisa menggunakan property css “border“. caranya kita bisa membuat garis atau border pada bagian-bagian tertentu untuk membentuk pola dari segitiga.

Saya membagi proses pembuatan segitiga CSS ini menjadi 2 tahap.

Tahap 1- Membuat Pola Segitiga

Perhatikan contoh berikut.

HTML

<h2>Membuat Segitiga Dengan CSS - www.siapngoding.my.id</h2>
	
<div class="segitiga1"></div>

Pada script HTML di atas, saya contohkan dengan membuat sebuah element <div> .. </div> yang kita beri class segitiga1.

Selanjutnya kita berikan sentuhan CSS.

CSS

.segitiga1{
	height:0px;
	width:0px;
	border-bottom:solid 120px blue;
	border-left:solid 80px red;
	border-right:solid 80px yellow;
}

Pada script CSS di atas, kita set dulu ukuran lebar dan tinggi nya ke 0px. agar tidak ada space kosong pada segitiga.

Selanjutnya beri garis bawah (border-bottom) dengan jenis solid, ukuran garis 120px dengan warna blue.

Garis kiri (border-left) dengan jenis solid, ukuran 80px dengan warna red. garis kanan (border-right) dengan jenis solid, ukuran 80px dengan warna yellow.

Maka Hasilnya akan seperti berikut.

Tahap 2 – Mempertegas Segitiga

Langkah selanjutnya, ubah warna dari border-left dan border-right menjadi transparent agar warnanya menjadi transparan.

CSS

.segitiga1{
	height:0px;
	width:0px;
	border-bottom:solid 120px blue;
	border-left:solid 80px transparent;
	border-right:solid 80px transparent;
}

Seperti yang terlihat pada script CSS di atas, sekarang warna garis kanan dan garis kiri kita ubah warna nya menjadi transparent.

Maka hasilnya seperti berikut.

Seperti yang terlihat pada gambar di atas. kita telah berhasil membuat bentuk segitiga.

Membuat Segitiga Ke Atas, Kanan, Bawah dan Kiri Dengan CSS

Untuk percobaan selanjutnya, untuk membuat bentuk segitiga yang mengarah ke kanan, ke bawah ataupun ke kiri, kita tinggal memainkan garis atau border.

Seperti pada contoh berikut.

<!DOCTYPE html>
<html>
<head>
	<title>Membuat Segitiga Dengan CSS - www.malasngoding.com</title>
</head>
<body>
 
	<style type="text/css">
		.segitiga1{
			height:0px;
			width:0px;
			border-bottom:solid 120px blue;
			border-left:solid 80px transparent;
			border-right:solid 80px transparent;
 
			margin-bottom: 20px;
		}
 
		.segitiga2{
			height:0px;
			width:0px;
			border-left:solid 120px red;
			border-top:solid 80px transparent;
			border-bottom:solid 80px transparent;
			
			margin-bottom: 20px;
		}
 
		.segitiga3{
			height:0px;
			width:0px;
			border-top:solid 120px orange;
			border-left:solid 80px transparent;
			border-right:solid 80px transparent;
			
			margin-bottom: 20px;
		}
 
		.segitiga4{
			height:0px;
			width:0px;
			border-right:solid 120px green;
			border-top:solid 80px transparent;
			border-bottom:solid 80px transparent;
		}
	</style>	
 
 
	<h2>Membuat Segitiga Dengan CSS - www.siapngoding.my.id</h2>
 
	<!-- segitiga ke atas -->
	Segitiga
	<div class="segitiga1"></div>
 
	<!-- segitiga ke kanan -->
	Segitiga ke kanan
	<div class="segitiga2"></div>
 
	<!-- segitiga ke bawah -->
	Segitiga ke bawah
	<div class="segitiga3"></div>
 
	<!-- segitiga ke kiri -->
	Segitiga ke kiri
	<div class="segitiga4"></div>
 
</body>
</html>

Dan saat dijalankan maka hasilnya akan seperti berikut ini.

Sampai di sini selesai sudah pembahasan tentang cara membuat segitiga dengan berbagai macam bentuk dengan menggunakan HTML dan CSS.

Selanjutnya silahkan teman-teman melakukan experimen dengan mengubah warna atau ukuran, agar lebih familiar dengan teknik pembuatan bentuk segitiga dengan CSS menggunakan border.

Incoming Search Terms:
  • template css menu siap ngoding
  • css segitiga
  • belajar css siapngoding
  • belajar membuat bentuk css
  • membuat bentuk dengan css
  • membuat segitia menggunakan css
  • source code html dan css sidebar siap ngoding