Membuat Berbagai Shapes Dengan CSS

Membuat Berbagai Shapes Dengan CSS

Membuat Berbagai Shapes Dengan CSS - Shapes Dari CSS bisa kita buat dengan script CSS yang cukup simple. Shapes bisa berbentuk macam-macam seperti Bintang, lingkaran, ying-yang, love, Segitiga dll.

The Shapes of CSS

Shapes mempunyai peranan penting dalam pengaplikasian CSS, seperti button yang dibuat dari retangle dan masih banyak lagi Shapes-shapes yang lainnya masih sering digunakan pada Web.Blog.

The Shapes of CSS

1. Square atau Kotak

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

2. Rectangle atau Persegi Panjang

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

3. Circle atau Lingkaran 

#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */

4. Oval atau Lonjong

#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */

5. Triangle Up atau Segitiga Sama Kaki

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

6. TriAngle Top Left

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

7. Curver Trail Arrow / Panah Kesamping

#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid red;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

8. Parallelogram

#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
background: red;
}

9. Invinity

#infinity {
    position: relative;
    width: 212px;
    height: 100px;
}
#infinity:before,
#infinity:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;  
    border: 20px solid red;
    -moz-border-radius: 50px 50px 0 50px;
         border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
         border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

Oke, Selamat Mencoba Kawan...