Membuat bentuk-bentuk dasar seperti kotak, lingkaran, dan segitiga dalam HTML dan CSS merupakan langkah awal yang baik bagi pemula yang ingin memahami cara kerja styling dalam pengembangan web. Pada artikel ini, kita akan membahas bagaimana cara membuat ketiga bentuk tersebut dengan kode yang sederhana.

1. Membuat Kotak

Kotak adalah bentuk dasar yang paling mudah dibuat dengan CSS. Untuk membuatnya, kita hanya perlu menentukan lebar (width), tinggi (height), dan warna latar belakang (background-color). Berikut adalah contoh kode untuk membuat sebuah kotak berwarna merah dengan ukuran 100×100 piksel:

.kotak {
    width: 100px;
    height: 100px;
    background-color: red;
}

Dalam HTML, elemen kotak ini bisa ditulis seperti ini:

<div class="kotak"></div>

Dengan kode ini, Anda akan melihat sebuah kotak berwarna merah di halaman web Anda.

2. Membuat Lingkaran

Lingkaran dapat dibuat dengan mengubah sebuah kotak menjadi bentuk bulat menggunakan properti border-radius. Jika kita menetapkan border-radius menjadi 50%, maka bentuk tersebut akan berubah menjadi lingkaran sempurna. Berikut adalah kode untuk membuat lingkaran biru dengan diameter 100 piksel:

.lingkaran {
    width: 100px;
    height: 100px;
    background-color: blue;
    border-radius: 50%;
}

Elemen HTML-nya:

<div class="lingkaran"></div>

Lingkaran ini akan ditampilkan sebagai elemen bulat berwarna biru.

3. Membuat Segitiga

Segitiga sedikit lebih rumit untuk dibuat karena CSS tidak memiliki properti langsung untuk membuat bentuk segitiga. Namun, kita bisa memanfaatkan properti border untuk membuat bentuk ini. Berikut adalah teknik yang digunakan:

.segitiga {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid green;
}

Kode ini menggunakan tiga garis perbatasan (border) untuk menciptakan ilusi segitiga. Elemen HTML untuk segitiga ini adalah:

<div class="segitiga"></div>

Segitiga ini akan muncul sebagai bentuk berwarna hijau.

Dengan kombinasi sederhana dari properti CSS seperti width, height, border-radius, dan border, kita dapat dengan mudah membuat bentuk-bentuk dasar seperti kotak, lingkaran, dan segitiga. Teknik-teknik ini adalah fondasi yang sangat penting dalam pengembangan web modern, khususnya untuk membangun desain layout yang lebih kompleks di masa mendatang.