Cara Membuat CSS Geometric Triangle
Hallo rekan rekan Dumenity berjumpa lagi pada panduan kursuswebdesign, di panduan kali ini kita akan belajar mengenai Cara Merancang CSS Geometric Triangle. CSS Geometric Triangle ialah menggambar yang dilakukan oleh seorang programer menggunakan HTML dan CSS bukan menggunakan sebuah gambar. Kenapa mesti menggunakan CSS kok…??? tak menggunakan gambar saja, karean kita lebih mempertimbangkan ukuran datanya apabila kita menggunakan teks karenanya ukuran datanya lebih ringan di banding kita menggunakan file gambar yang lebih berat kita ditampilkan pada browser.
Berat sebuah file blog kita kan mempengaruhi performa dari browser, browser akan jadi lebih lambat pada mereload datanya. Dengan demikian itu blog kita akan susah terindex oleh google. Oke itu tadi sekilas mengenai kenapa kita mesti mempertimbang file blog kita. Kembali lagi ke topik kita yaitu Cara Merancang CSS Geometric Triangle. Bagaimana sih cara membuatnya caranya lumayan gampang sekali teman -teman, sebelum kita memulai membuatnya kita siap file HTML-nya terlebih dahulu.
Silahkan teman – teman bikin file dengan nama
CSS_Geometric_Triangle.html
Oke kalau telah silahkan teman – teman isi file tersebut dengan struktur HTML di bawah ini;
<html>
<head>
<title> Cara Merancang CSS Geometric Triangle </title>
</head>
<body>
<div class=Triangle></div>
</body>
</html>
Darti struktur HTML di atas kita akan membangun sebuah Triangle dengan bantuan sebuah
<div class=Triangle></div>
Oke kalau telah kita akan membangun manfaat CSS-nya, Silahkan teman – teman bikin file CSS bagi <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 telah silahkan teman – teman save dan jalankan di browsernya, apabila teman – teman membangun struktur HTML dan manfaat CSSnya dengan benar karenanya hasilnya akan seperti di bawah ini:
Oke begitulah tadi pembahasan saya mengenai Cara Merancang CSS Geometric Triangle di panduan kali ini. Semoga dapat bermanfaat.
Sumber https://kursuswebsite.org
