Membuat Bentuk Bangun Datar dengan CSS

Dalam Pelajaran Matematika, Ada beberapa Materi yang menurut sebagian orang agak sedikit njelimet alias rumit. termasuk juga bagi pribadi saya sendiri yang kadang kala agak kesulitan dalam mempelajarinya. Salah satu materi yang menurut saya agak sulit itu adalah yang berkaitan dengan Bangun Datar atau lebih luasnya tentang Geometri. Bangun-bangun datar yang paling sering dipelajari disekolahan mulai dari SD, SMP sampai SMA bahkan sampai ditingkat perkuliahan diantaranya adalah, Persegi, persegipanjang, Lingkaran, Trapesium, Segitiga, Jajargenjang dll. Namun, pada tulisan saya kali ini, saya tidak akan membahas materi-materi tersebut. Melainkan hanya akan membahas bagaimana cara membuatnya dengan CSS agar dapat di tampilkan didalam postingan blog.

Bagaimana Membuat Bangun Datar dengan CSS?

Biasanya dalam membuat bangun datar seperti yang saya sebut tadi, akan lebih mudah menggunakan software yang dikususkan untuk program matematika seperti geogebra atau sejenisnya, bahkan dengan menggunakan microsoft office word pun mudah membuatnya. Namun, bagaimana kalau kita ingin membuatnya di blog?tentunya tanpa menggunakan gambar hasil dari software tadi ya..
Nah untuk menjawab itu, maka disini saya akan memberikan sedikit tutorial cara membuat Bangun Datar Dengan menggunakan CSS.

Bangun Datar Persegi dan Persegi Panjang

Bangun Datar ini merupakan dasar dalam membuat bangun-bangun lain, untuk lebih jelasnya silahkan lihat contoh dan penerapannya di bawah ini.

1. Persegi

Cara membuatnya:
Kode pemanggilan HTML :

<div  id='persegi'></div>

Kode CSS nya :

#persegi {width:120px; height:120px;background-color:#1E8BC3;}

Contoh gambar yang dihasilkan:

2. Persegi Panjang

Cara membuatnya:
Kode pemanggilan HTML :

<div  id='persegipanjang'></div>

Kode CSS nya :

#persegipanjang {width:300px; height:120px;background-color:#3A539B;}

Contoh gambar yang dihasilkan:

3. Lingkaran

Cara membuatnya:
Kode pemanggilan HTML :

<div  id='lingkaran'></div>

Kode CSS nya :

#lingkaran {width:220px; height:120px;background-color:#67809F;border-radius:50%}

Contoh gambar yang dihasilkan:

4. Oval

Cara membuatnya:
Kode HTML :

<div  id='oval'></div>

Kode CSS nya :

#oval {width:220; height:120;background-color:#E67E22;border-radius:50%}

Contoh gambar yang dihasilkan:

5. Segitiga

a. Segitiga Sama Kaki
Cara Membuatnya :
Kode pemanggilan HTML :

<div  id='Segitiga'></div>

Kode CSS nya :

#Segitiga {width:0px; height:10px;border-bottom:140px solid #F9690E;border-left:70px solid transparent;border-right:70px solid transparent;}

Contoh gambar yang dihasilkan:

b. Segitiga Sembarang
Cara Membuatnya :
Kode pemanggilan HTML :

<div  id='segitiga1'></div>

Kode CSS nya :

#segitiga1 {width:0px; height:10px;border-top:140px solid #F9690E;border-left:150px solid transparent;border-right:70px solid transparent;}

Contoh gambar yang dihasilkan:

c. Segitiga Siku-siku
Cara Membuatnya :
Kode pemanggilan HTML :

<div  id='segitiga2'></div>

Kode CSS nya :

#segitiga2 {width:0px; height:10px;border-bottom:140px solid #F9690E;border-right:120px solid transparent;}

Contoh gambar yang dihasilkan:

6. Trapesium

Cara Membuatnya :
Kode pemanggilan HTML :

<div  id='trapesium'></div>

Kode CSS nya :

#trapesium {width: 120px; height: 0; border-bottom: 120px solid #722D6A; border-left: 60px solid transparent; border-raight: 60px solid transparent; margin-bottom:50px;}

Contoh gambar yang dihasilkan:

7. Jajargenjang

Cara Membuatnya :
Kode pemanggilan HTML :

<div  id='jajargenjang'></div>

Kode CSS nya :

#jajargenjang {width:180px;height:100px;background:#9A12B3;-webkit-transform:skew(30deg); -moz-transform:skew(30deg);-ms-transform:skew(30deg);-0-transform:skew(30deg); transform: skew(30deg);}

Contoh gambar yang dihasilkan:

Itulah beberapa contoh pembuatan Bentuk Bangun Datar dengan CSS. Untuk bentuk-bentuk lainnya anda bisa mengembangkannya sendiri dengan cara coba-coba. Banyak software yang tersedia di internet untuk mempelajarinya.

Terimakasih Kamu sudah membaca Tulisan kami mengenai Membuat Bentuk Bangun Datar dengan CSS. Semoga Bermanfaat dan jangan lewatkan beberapa referensi terkait dibawah ini ya.

Referensi Terkait