Cara Membuat CSS Geometric Triangle

Hallo sahabat Dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini kita akan belajar tentang Cara Membuat CSS Geometric Triangle. CSS Geometric Triangle adalah menggambar yang dilakukan oleh seorang programer menggunakan HTML dan CSS bukan menggunakan sebuah gambar. Kenapa harus menggunakan CSS kok…??? tidak menggunakan gambar saja, karean kita lebih mempertimbangkan ukuran datanya jika kita menggunakan teks maka ukuran datanya lebih ringan di banding kita menggunakan file gambar yang lebih berat kita ditampilkan dalam browser.

Berat sebuah file website kita kan mempengaruhi kinerja dari browser, browser akan jadi lebih lambat dalam mereload datanya. Dengan begitu website kita akan susah terindex oleh google. Oke itu tadi sekilas tentang kenapa kita harus mempertimbang file website kita. Kembali lagi ke topik kita yaitu Cara Membuat CSS Geometric Triangle. Bagaimana sih cara membuatnya caranya cukup mudah sekali teman -teman, sebelum kita memulai membuatnya kita siap file HTML-nya terlebih dahulu.

Silahkan teman – teman buat file dengan nama

CSS_Geometric_Triangle.html

Oke kalau sudah silahkan teman – teman isi file tersebut dengan struktur HTML di bawah ini;

<html>
	<head>
		<title> Cara Membuat CSS Geometric Triangle </title>
	</head>
	<body>
		<div class="Triangle"></div>
	</body>
</html>

Darti struktur HTML di atas kita akan membuat sebuah Triangle dengan bantuan sebuah

 <div class="Triangle"></div>

Oke kalau sudah kita akan membuat fungsi CSS-nya, Silahkan teman – teman buat file CSS untuk <div class=”Triangle”></div> seperti di bawah ini:

   <style>       
                .triangle {
				height: 0;
				width: 0;
				border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 100px solid #ED8B1E;
				margin: 10px
                         }
 </style>

Kalau sudah silahkan teman – teman save dan jalankan pada browsernya, jika teman – teman membuat struktur HTML dan fungsi CSSnya dengan benar maka hasilnya akan seperti di bawah ini:

Oke itulah tadi pembahasan saya tentang Cara Membuat CSS Geometric Triangle pada tutorial kali ini. Semoga dapat bermanfaat.

Kategori