Cara Membuat Bangun Datar Dengan CSS

Baik rekan-rekan teknologi[dot]visitklaten[dot]com, dalam kesempatan kali ini kami akan berbagi Cara Membuat Bangun Datar Dengan CSS yang sederhana, mudah dan simple.

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 Berlian, Telur, Pac-Man, Talk Bubble, dan RSS Feed.

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.

Cara Membuat Bangun Datar Dengan CSS

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

Berlian

<div id="diamond"></div>

#diamond {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: red;
  position: relative;
  top: -50px;
}
#diamond:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: red;
}

<div id="diamond-shield"></div>

#diamond-shield {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 20px solid red;
  position: relative;
  top: -50px;
}
#diamond-shield:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 20px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 70px solid red;
}

<div id="diamond-narrow"></div>

#diamond-narrow {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 70px solid red;
  position: relative;
  top: -50px;
}
#diamond-narrow:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 70px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 70px solid red;
}

<div id="cut-diamond"></div>

#cut-diamond {
  border-style: solid;
  border-color: transparent transparent red transparent;
  border-width: 0 25px 25px 25px;
  height: 0;
  width: 50px;
  box-sizing: content-box;
  position: relative;
  margin: 20px 0 50px 0;
}
#cut-diamond:after {
  content: "";
  position: absolute;
  top: 25px;
  left: -25px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: red transparent transparent transparent;
  border-width: 70px 50px 0 50px;
}

Telur

<div id="egg"></div>

#egg {
  display: block;
  width: 126px;
  height: 180px;
  background-color: red;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Pac-Man

<div id="pacman"></div>

#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid red;
  border-left: 60px solid red;
  border-bottom: 60px solid red;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

Talk Bubble

<div id="talkbubble"></div>

#talkbubble {
  width: 120px;
  height: 80px;
  background: red;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
#talkbubble:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 26px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 26px solid red;
  border-bottom: 13px solid transparent;
}

RSS Feed

<div id="rss"></div>

#rss {
width: 20em;
height: 20em;
border-radius: 3em;
background-color: #ff0000;
font-size: 14px;
}
#rss:before {
content: '';
z-index: 1;
display: block;
height: 5em;
width: 5em;
background: #fff;
border-radius: 50%;
position: relative;
top: 11.5em;
left: 3.5em;
}
#rss:after {
content: '';
display: block;
background: #ff0000;
width: 13em;
height: 13em;
top: -2em;
left: 3.8em;
border-radius: 2.5em;
position: relative;
box-shadow:
  -2em 2em 0 0 #fff inset,
  -4em 4em 0 0 #ff0000 inset,
  -6em 6em 0 0 #fff inset
}

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.