Membuat Segitiga dengan HTML CSS
Halo teman teman jumpa lagi dengan tips dan trik di Source Code Aplikasi, kali ini kita akan belajar Merancang Segitiga dengan HTML dan CSS, amat gampang sekali cara pembuatannya, oke seketika saja kita praktekan yah teman teman..
Pertama-tama – tama buka text editor kalian lalu ketikan kode HTML berikut,
Yang pertama-tama kita bikin yaitu 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 bikin 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:
Demikianlah panduan Merancang Segitiga dengan HTML dan CSS, semoga bermanfaat yah teman – teman 😀
Sumber https://kursuswebsite.org
