Membuat Segitiga dengan HTML & CSS

Halo teman teman jumpa lagi dengan tips dan trik di Dumetschool, kali ini kita akan belajar Membuat Segitiga dengan HTML dan CSS, sangat mudah sekali cara pembuatannya, oke langsung saja kita praktekan yah teman teman..

Pertama – tama buka text editor kalian lalu ketikan kode HTML berikut,

Yang pertama kita buat adalah segitiga yang mengarah ke atas dan kebawah berikut kode HTML dan CSSnya, save kode di bawah ini dengan nama segitiga.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>segitiga 1</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<h1>Segitiga Atas dan Bawah</h1>
	<div class="segitiga">
		<div class="segitigaChild segitiga-atas"></div>
		<div class="segitigaChild segitiga-bawah"></div>
	</div>
</body>
</html>

Lalu ketikan kode css berikut dan beri nama dengan nama style.css

.segitiga{
	overflow: hidden;
	padding: 20px;
	margin: 20px;
	width: 300px;
	border: 2px solid #333;
}
	.segitigaChild{
		margin:10px;
		float: left;
	}
		.segitiga-atas{
			width: 0; 
			height: 0; 

			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			
			border-bottom: 50px solid orange;
		}

		.segitiga-bawah{
			width: 0; 
			height: 0; 
			
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			
			border-top: 50px solid lightgreen;
		}

Hasilnya seperti gambar di bawah ini:

Lalu ketikan kode html berikut setelah class segitiga,

<h1>Segitiga Kiri dan Kanan</h1>
	<div class="segitiga">
		<div class="segitigaChild segitiga-kiri"></div>
		<div class="segitigaChild segitiga-kanan"></div>
	</div>

Di css nya tambah kode css berikut

.segitiga-kanan{
			width: 0; 
			height: 0; 
			
			border-top: 50px solid transparent;
			border-bottom: 50px solid transparent;
			
			border-left: 50px solid #ff0;
		}

		.segitiga-kiri{
			width: 0; 
			height: 0; 
			
			border-top: 50px solid transparent;
			border-bottom: 50px solid transparent; 
			
			border-right:50px solid #f0f; 
		}

Hasil nya seperti gambar di bawah ini

Lalu buat baris baru di HTML dan ketikan kode berikut:

<h1>Segitiga Atas kiri dan kanan</h1>
	<div class="segitiga">
		<div class="segitigaChild segitiga-atas-kiri"></div>
		<div class="segitigaChild segitiga-atas-kanan"></div>
	</div>

Dan tambah kan kode CSS berikut

.segitiga-atas-kiri{
			width: 0; 
			height: 0; 
			
			border-top: 50px solid #f0f; 
			border-right: 50px solid transparent;
		}

		.segitiga-atas-kanan{
			width: 0; 
			height: 0; 
			
			border-top: 50px solid #ff0; 
			border-left: 50px solid transparent;
		}

Hasilnya seperti gambar berikut

Terakhir ketikan kode html berikut

<h1>Segitiga Bawah kiri dan kanan</h1>
	<div class="segitiga">
		<div class="segitigaChild segitiga-bawah-kiri"></div>
		<div class="segitigaChild segitiga-bawah-kanan"></div>
	</div>

Lalu tambahkan kode css berikut di style.css

.segitiga-bawah-kiri{
			width: 0; 
			height: 0; 
			
			border-bottom: 50px solid #ff0; 
			border-right: 50px solid transparent;
		}
		.segitiga-bawah-kanan{
			width: 0; 
			height: 0; 
			
			border-bottom: 50px solid #f0f; 
			border-left: 50px solid transparent;
		}

Hasilnya seperti berikut:

Sekian tutorial Membuat Segitiga dengan HTML dan CSS, semoga bermanfaat yah teman – teman 😀

Kategori