Assalamu’alaikum warahmatullahi wabarakatuh
Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips seputar dunia website, pada kesempatan kali ini saya akan memberikan tips tentang Macam – macam Shapes Dengan CSS 3 pada latihan ini kita akan membuat shape atau bentuk dengan html dan css.
Dengan menggunakan css kita dapat membuat sebuah bentuk yang beraneka ragam, Macam – macam Shapes Dengan CSS 3 diantaranya ada
- square
- circle
- oval
- trapezoid
- parallelogram
- triangle up
Ke enam macam ini akan kita buat menggunakan css, baik langsung saja kita implementasikan. Teman – teman siapkan cek editornya dan ketikkan script html nya di bawah ini
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>Square</h2> <div class="square"></div> <h2>Circle</h2> <div class="circle"></div> <h2>Oval</h2> <div class="oval"></div> <h2>Trapezoid</h2> <div class="trapezoid"></div> <h2>Parallelogram</h2> <div class="parallelogram"></div> <h2>Triangle Up</h2> <div class="triangle-up"></div> </body> </html> |
Kemudian pada css nya teman – teman masukkan juga untuk mengatur shapes nya
|
1 2 3 4 5 6 |
.square {height: 50px;width: 50px;background-color: #2962FF;} .circle {height: 50px;width: 50px;background-color: #2962FF;border-radius: 50%;} .oval {height: 50px; width: 100px; background-color: #2962FF; border-radius: 50%;} .trapezoid {border-bottom: 50px solid #2962FF; border-left: 25px solid transparent; border-right: 25px solid transparent; height: 0; width: 125px;} .parallelogram {width: 100px;height: 50px;transform: skew(20deg);background: #2962FF;} .triangle-up {width: 0;height: 0;border-left: 25px solid transparent;border-right: 25px solid transparent;border-bottom: 50px solid #2962FF;} |
Jika sudah save dengan nama index.html lalu jalankan browser nya, maka dengan begitu pada browser akan tampil seperti gambar di bawah ini
Bisa perhatikan hasil layout nya dan css nya, untuk membuat bentuk seperti gambar di atas ini banyak menggunakan border. Teman – teman yang suka design yang aneh – aneh dengan css bisa di kembangkan lagi dari metode di atas ini ya. 🙂
Sekian dari saya, kita jumpa kembali pada artikel yang akan datang. Semoga artikel Macam – macam Shapes Dengan CSS 3 ini bermanfaat. Terimakasih dan sampai jumpa.