/ css

Membuat 3 Macam Garis dengan CSS

Tiga macam garis yang akan dibuat adalah garis miring, garis lengkung dan garis gelombang. Pembuatan garis-garis tersebut pada suatu laman web bisa menggunakan CSS saja.

1. Garis Miring

Garis miring dapat dibuat dengan CSS skew transform. Coba perhatikan transform: skewY(6deg); berikut:

2. Garis Melengkung

Garis melengkung dapat dibuat dengan CSS border-radius.

3. Garis Bergelombang

Garis bergelombang dapat dibuat dengan membentuk dua buah lingkaran menggunakan CSS border-radius, kemudian atur posisinya dengan CSS top, right atau left, perhatikan sematan kode berikut:

Itu bukan garis tetapi shape. jika ingin membuat garis bergelombang dari sematan diatas dengan border, garis tidak dapat membentuk gelombang.

Sebagai solusi, bisa menggunakan elemen SVG, berikut contohnya: