contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074


Membuat Bangun Datar Dengan CSS

Posted in HTML & CSS Life at 04 April 2016 With 0 Comments

OK temen-temen pada artikel kali ini kita akan membuat berbagai bentuk bangun datar dengna css, apa itu bangun datar.. ? tentunya temen-temen sudah mengetahuinya ya.. ya.. kita akan membuat bentuk seperti lingkaran, oval / lonjong, segitiga, jajar genjang dengan CSS

Membuat bangun datar dengan css

Membuat Lingkaran Dengan Css



Code dibawah ini adalah code CSS yang digunakan untuk membuat bentuk lingkaran, Silahkan anda copy paste saja

.circle { 
   width: 100px;
   height: 100px;
   background: #07CAF3;
   -moz-border-radius: 50px;
   -webkit-border-radius: 50px;
   border-radius: 50px;
}

Output :

membuat lingkaran dengan css

 

Membuat Oval Dengan Css

Code dibawah ini adalah code CSS yang digunakan untuk membuat bentuk oval atau lonjong, Silahkan anda copy paste saja

.oval {
    height: 200px;
    width: 100px;
    background: #07CAF3;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

Output :

membuat lonjong atau oval dengan css

Membuat Segitiga Dengan Css

Code dibawah ini adalah code CSS yang digunakan untuk membuat bentuk segitiga Silahkan anda copy paste saja

.triangle {
    height: 0;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #07CAF3;
}

Output :

membuat segitiga dengan css

 

Membuat Segitiga Siku-Siku Dengan Css

Code dibawah ini adalah code CSS yang digunakan untuk membuat bentuk segitiga  siku-siku / sama kaki , Silahkan anda copy paste saja

.triangle-sided {
    height: 0;
    width: 0;
    border-top: 100px solid #07CAF3;
    border-right: 100px solid transparent;
}

Output :

segitiga siku-siku sama kaki

Membuat Persegi / Rectangle Dengan Css

Code dibawah ini adalah code CSS yang digunakan untuk membuat persegi / rectangle , Silahkan anda copy paste saja

.rectangle {
   height: 100px;
   width: 200px;
   background: #07CAF3;
}

Output :

membuat persegi dengan css

Membuat Jajar Genjang Dengan Css

Code dibawah ini adalah code CSS yang digunakan untuk membuat jajar Genjang , Silahkan anda copy paste saja

.parallelogram {
   height: 75px;
   width: 150px;
   background: #07CAF3;
   -webkit-transform: skew(20deg);
   -moz-transform: skew(20deg);
   -o-transform: skew(20deg);
   transform: skew(20deg);
}

Output :

membuat jajar genjang dengan css

Membuat Kerucut Dengan Css

Code dibawah ini adalah code CSS yang digunakan untuk membuat kerucut , Silahkan anda copy paste saja

.cone {
  height: 0;
  width: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 100px solid #07CAF3;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

Output :

membuat kerucut dengan css

 

 Demikanlah artikel kita kali ini tentang membuat bentuk bangun datar dengan css, seperti

-Membuat Lingkaran dengan CSS
-Membuat Segitiga dengan css
-Membuat Jajar Genjang dengan CSS dll,,,

Semoga artikel ini bermanfaat

Artikel Terkait

Diskusi