Cara Membuat Shape dengan CSS3

Halloo teman-teman, Hari ini kita akan mempelajari teknik pembuatan shape dengan menggunakan CSS3. Shape biasanya dibuat di dalam software desain seperti photoshop, illustrator dan sebagainya. Pada tutorial ini shape dapat kita buat dengan mudah yakni menggunakan teknik CSS3 sederhana yang pernah kita terapkan pada kasus sebelumnya. Penasaran ya.. Mari kita lihat kodenya sebagai berikut :

See the Pen sphCf by Rully Febrian (@rully) on CodePen.

Coba teman-teman perhatikan dengan menggunakan property border dan radius kita dengan mudah membuat shape. Berbeda dengan twelve-point-star kita menggunakan transform: rotate yang berfungsi untuk memutar obyek dengan jarak 30deg. Basic shape dari twelve-point-star ini adalah sebuah persegi. Untuk lebih jelas silahkan teman-teman mengubah nilai propertinya dan lihat perubahannya.

Demikian tutorial ini semoga bermanfaat bagi teman-teman dan menambah pengetahuan tentang CSS3. Terimakasih dan Sampai bertemu di tutorial selanjutnya.

DOWNLOAD