Beberapa bentuk dasar yang dapat dibuat hanya dengan HTML dan CSS, dan bonus penggunaan inline SVG.
Circle
Bentuk lingkaran dapat dibuat dengan hanya menggunakan HTML dan CSS, ataupun dengan inline SVG
Circle with HTML and CSS
Pertama kita akan membuat lingkaran menggunakan HTML dan CSS.
<div style="width: 50px; height: 50px; border-radius: 50%; background: tomato;"></div>
Output:
SVG Circle
Bentuk lingkaran dengan menggunakan SVG.
<svg width="50" height="50" viewbox="0 0 50 50"><circle cx="25" cy="25" r="25" fill="lime"/></svg>
Output:
Chevron
Bentuk chevron adalah bentuk menyerupai huruv V yang dilebarkan, biasanya digunakan sebagai penunjuk arah navigasi pada website atau aplikasi mobile.
Chevron with HTML and CSS Berikut adalah langkah-langkah membuat bentuk chevron yang diarahkan menggunakan CSS transform: rotate().
Chevron Right
<div style="width: 32px; height: 32px; border-style: solid; border-width: 8px 8px 0 0; transform: translateX(-8px) rotate(45deg); border-color: teal"></div>
Output:
Chevron Left
<div style="width: 32px; height: 32px; border-style: solid; border-width: 8px 8px 0 0; transform: translateX(8px) rotate(225deg); border-color: teal"></div>
Output:
Chevron Up
<div style="width: 32px; height: 32px; border-style: solid; border-width: 8px 8px 0 0; transform: translateY(8px) rotate(-45deg); border-color: teal"></div>
Output:
Chevron Down
<div style="width: 32px; height: 32px; border-style: solid; border-width: 8px 8px 0 0; transform: translateY(-8px) rotate(135deg); border-color: teal"></div>
Output:
Penambahan CSS
transform: translate()di atas hanya untuk menyesuaikan posisi.
Tentunya bentuk ini juga dapat dibuat dengan menggunakan SVG, hanya saja jauh lebih praktis menggunakan metode di atas.
Triangle
Bentuk lain yang akan kita buat adalah bentuk segitiga, karena bentuk ini juga cukup berguna dan banyak digunakan sebagai icon pada tombol dan atau menu dari website.
Triangle with HTML and CSS
Berikut adalah segitiga sama sisi yang dibuat menggunakan HTML dan CSS, karena bukan pelajaran matematika, disini tidak akan dibahas bagaimana cara menghitung tinggi segitiga ya.
<div style="width: 43.3px; height: 50px; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 43.3px solid deeppink"></div>
Output:
<div style="width: 43.3px; height: 50px; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-right: 43.3px solid deeppink"></div>
Output:
<div style="width: 50px; height: 43.3px; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 43.3px solid deeppink"></div>
Output:
<div style="width: 50px; height: 43.3px; border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 43.3px solid deeppink"></div>
Output:
SVG Triangle
Bentuk segitiga dengan menggunakan SVG.
<svg width="43.3" height="50" viewbox="0 0 43.3 50"><polygon points="0,0 43.3,25 0,50" fill="brown"/></svg>
Output:
<svg width="43.3" height="50" viewbox="0 0 43.3 50"><polygon points="43.3,0 0,25 43.3,50" fill="brown"/></svg>
Output:
<svg width="50" height="43.3" viewbox="0 0 50 43.3"><polygon points="0,43.3 25,0 50,43.3" fill="brown"/></svg>
Output:
<svg width="50" height="43.3" viewbox="0 0 50 43.3"><polygon points="0,0 25,43.3 50,0" fill="brown"/></svg>
Output:
Conclusion
Sebetulnya apabila website kita banyak menampilkan icon dan atau shape seperti di atas di banyak tempat dan berulang-ulang, akan lebih praktis dengan menggunakan pure HTML dan menentukan CSS class yang bisa digunakan berulang. Atau bisa juga dengan cara menggunakan SVG sebagai gambar dengan menggunakan img tag, sehingga browser hanya perlu men-download gambar SVG sekali saja, selebihnya browser akan memanggilnya dari cache.
Akan tetapi apabila kita hanya perlu menampilkan shape di atas hanya 1 kali dalam 1 dokument, ada kalanya menggunakan inline SVG saja sudah cukup.