Cara Membuat Bangun Datar dengan CSS Murni

agung wisudhatama July 12, 2023 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Cara Membuat Bangun Datar dengan CSS Murni

BANGUN DATAR merupakan objek geometri dua dimensi yang terdiri dari beberapa titik, garis, dan sudut. Bangun datar memiliki bermacam-macam bentuk, seperti bentuk segitiga, persegi, persegi panjang, lingkaran, trapesium serta jajargenjang. Layaknya sebuah nama, bangun datar merupakan bentuk dari sebuah bangun yang permukaannya datar atau dua dimensi (2D). Kita dapat mengenalkan bangun datar pada semua orang lewat media seperti, menggunting kertas lipat berbentuk bangun datarnya atau menggambar bentuk-bentuknya sesuai bangun datarnya. Sebuah kegiatan yang mengasyikkan bukan disela-sela pembelajaran?

Baca Juga :

Berikut adalah beberapa nama bangun ruang beserta cara pembuatannya :

1. LINGKARAN
Berbeda dari bangun datar lainnya, lingkaran adalah bentuk bangun datar yang tidak memiliki sisi, dan memiliki garis yang bundar, tidak membentuk sudut lancip atau sudut tumpul seperti bangun datar lainnya. Lingkaran merupakan bangun datar yang berpusat di titik pusat. Setiap titik ujung lingkaran memiliki panjang yang sama dari titik pusat lingkaran. Lingkaran juga memiliki sudut 180 derajat. Jarak dari titik pusat ke titik ujung lingkaran disebut dengan jari-jari.

Cara membuatnya :

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

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

2. PERSEGI
Persegi adalah bangun ruang yang memiliki sisi yang sama panjang. Namun, seperti persegi panjang, persegi membentuk empat sudut siku-siku. Dan kesemua sudut membentuk sudut 90 derajat atau sudut siku. Dan panjang semuanya sama, tidak ada yang beda, entah kependekan atau kepanjangan.

Cara membuatnya :

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

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

3. PERSEGI PANJANG
Persegi panjang adalah salah satu bentuk dari segi empat yang memiliki sisi yang panjang dan memiliki empat sudut siku-siku atau sudut 90 derajat. Selain itu, persegi panjang memiliki dua sisi yang panjang, dan dua sisi lainnya yang pendek. Atau dengan kata lain, memiliki dua pasang sisi yang sama panjang dan sejajar. Karena itu dinamakanlah Persegi panjang.

Cara membuatnya :

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

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

4. SEGITIGA
Segitiga merupakan sebuah bangun datar yang memiliki tiga garis yang saling bertemu pada tiap ujungnya. Setiap ruas garis yang bertemu di ujung itulah yang dinamakan sebagai sudut. Seperti yang kita tahu, terdapat beberapa jenis segitiga, yakni segitiga sama kaki, segitiga sama sisi, segitiga siku-siku dan segitiga sembarang. Segitiga sama kaki adalah segitiga yang kedua sisinya sama panjang.

Segitiga sama sisi merupakan segitiga yang ketiga sisinya memiliki panjang yang sama. Lalu segitiga siku-siku adalah segitiga yang membentuk sudut siku-siku yaitu 90 derajat. Sedangkan segitiga sembarang adalah segitiga yang seluruh sisinya tidak sama panjangnya.

Cara membuatnya :

<div id='segitiga'></div>

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

5. JAJARGENJANG
Jajar genjang merupakan bangun datar dua dimensi yang jika dilihat dari bentuknya hampir seperti segi empat yang memiliki dua rusuk sejajar serta saling berhadapan. Kemudian jajar genjang juga bisa diartikan sebagai segi empat yang dibentuk oleh dua pasang garis sejajar dengan sudut yang tidak 90 derajat atau tidak siku-siku.

Dengan demikian, jajar genjang juga tidak memiliki sumbu simetri dan hal ini yang menjadikannya berbeda dari bangun datar persegi. Dimana pada dasarnya bangun datar persegi memiliki empat sumbu simetri yang sama. Bangun datar yang satu ini sering kita sebut dengan sebutan Bangun Ketupat, ya karena memang bentuknya yang seperti ketupat.

Cara membuatnya :

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

#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);}

6. TRAPESIUM
Trapesium adalah bangun datar dua dimensi yang dibentuk oleh empat buah rusuk yang dua diantaranya saling sejajar namun tidak sama panjang. Trapesium termasuk jenis bangun datar segi empat yang mempunyai ciri khusus. Dan memang bentuknya tidak beraturan, tidak seperti bangun datar persegi.

Cara membuatnya :

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

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

Demo saya sertakan disini ya. Silakan di klik ini tombol.

BANGUN DATAR

Nah itulah teman-teman yang dapat saya bagikan pada sore hari ini. Disela-sela istirahat karena capek, saya masih sempetin buat bikin nih tutorial buat kalian. Lha gimana nggak capek, btw saya harus bolak-balik antar jemput istri saya yang kerja di RSUD Candi Umbul, Grabag, Kabupaten Magelang. Fiuh bener-bener capek tapi nikmat. Bersyukur aja, semoga ke depannya menuai hasilnya yang memuaskan. “Karena sesungguhnya sesudah kesulitan itu ada kemudahan.” – (Q.S Al-Insyirah: 5-6). Selamat sore. Salam Blogger. Silakan upgrade ilmu kalian.

Bagikan ke teman-teman kamu

Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Cara Membuat Bangun Datar dengan CSS Murni . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.