Membuat Bangun Datar Menggunakan CSS

Apakah rekan-rekan teknologi[dot]visitklaten[dot]com ingin Membuat Bangun Datar Menggunakan CSS yang sederhana, mudah dan simple ?. Yap.. dalam kesempatan kali ini kami akan berbagi caranya.

Tanpa plugin, hanya dengan bermodal HTML dan CSS yang sederhana dan simple maka rekan-rekan bisa Membuat Bangun Datar di WordPress. Bangun datar tersebut antara lain persegi, persegi panjang, lingkaran, oval, dan beragam bentuk segitiga.

CSS adalah singkatan dari Cascading Style Sheets yang terdapat 3 versi yaitu CSS1, CSS2, dan CSS3. CSS adalah suatu aturan untuk mengatur beberapa komponen di dalam sebuah web sehingga membuat lebih terstruktur dan seragam. CSS3 merupakan versi CSS terbaru yang bisa melakukan banyak hal terkait desain website. CSS3 mampu membuat animasi warna sampai animasi 3D di halaman website.

CSS sangat membantu untuk mempercantik tampilan website seperti dengan memberi warna, box shadow, padding, margin, align, posisi, dll.

CSS bisa membuat segala macam bentuk. Persegi dan persegi panjang adalah yang paling mudah karena bentuk alami. Dengan menambahkan lebar dan tinggi maka akan mendapatkan ukuran persegi panjang yang dibutuhkan.

Apabila ditambahkan radius batas maka dapat membulatkan bentuk itu sehingga bisa mengubah persegi atau persegi panjang menjadi lingkaran dan oval.

Sebelumnya kami ucapkan terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang telah meluangkan waktunya untuk mengunjungi website kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi.

Membuat Bangun Datar Menggunakan CSS

Berikut kami sampaikan bentuk bangun datar dengan disertai div html beserta style css,nya.

Persegi

<div id="square"></div>

#square {
  width: 100px;
  height: 100px;
  background: red;
}

Persegi Panjang

<div id="rectangle"></div>

#rectangle {
  width: 200px;
  height: 100px;
  background: red;
}

Lingkaran

<div id="circle"></div>

#circle {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%
}

Oval

<div id="oval"></div>

#oval {
  width: 200px;
  height: 100px;
  background: red;
  border-radius: 100px / 50px;
}

Segitiga

<div id="triangle-up"></div>

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div id="triangle-down"></div>

#triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

<div id="triangle-left"></div>

#triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
}

<div id="triangle-right"></div>

#triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
}

<div id="triangle-topleft"></div>

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

<div id="triangle-topright"></div>

#triangle-topright {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
}

<div id="triangle-bottomleft"></div>

#triangle-bottomleft {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;
}

<div id="triangle-bottomright"></div>

#triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
}

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.