Css Triangle, Teknik Pembuatan Dimensi Segitiga Dengan Border

Published by Concept Phone Jumat, 31 Agustus 2018

Sebelum mempelajari cuilan ini, Saya sarankan Anda untuk mempelajari CSS Border terlebih dahulu sebab di sini Saya hanya akan berbicara perihal border. Efek segitiga sanggup dibentuk dengan cara mengambil prinsip sederhana menyerupai ini:

border-width: 30px;
border-style: solid;
border-color: red green blue yellow;

Jika kita ubah ukuran lebar dan tinggi elemen menjadi 0, maka inilah yang akan Anda dapatkan:

Cukup warnai salah satu sisi/dua sisi border saja maka Anda akan mendapat imbas segitiga yang Saya maksud:

div {   width:0;   height:0;   border-width:50px;   border-style:solid;   border-color:transparent transparent black transparent; }

div {   width:0;   height:0;   border-width:50px;   border-style:solid;   border-color:black black transparent transparent; }

Setelah ini Saya yakin akan muncul sebuah pertanyaan, “Lalu untuk apa semua ini?”

Oke, coba lihat beberapa pola di bawah ini:

• Efek Page-Fold/Lipatan Kertas dengan CSS
• Efek Balon Kata dengan CSS
• Efek Pita Tiga Dimensi dengan CSS
• CSS3 Ribbon Snippets

Sumber https://www.dte.web.id/