Saya ingin membagi sedikit trik CSS sederhana yaitu membuat balon percakapan dengan CSS. Sebelumnya, pastikan anda mengerti cara menggunakan CSS dan teknik positioning dengan CSS. Sudah banyak tutorial semacam ini, jadi pastikan juga anda belum pernah menjumpai trik ini sebelumnya.

Kita mulai dengan menciptakan bentuk segitiga dengan menggunakan permainan border pada elemen div. CSS yang digunakan kurang lebih sebagai berikut:

.segitiga {
     width:0;
     border-top:solid 20px #f00;
     border-right:solid 20px #ff0;
     border-bottom:solid 20px #0ff;
     border-left:solid 20px #00f; }

Jika dilihat, kita mendapati 4 buah segitiga di sana (gambar no. 1). Kita hanya butuh sebuah saja, jadi kita hilangkan 3 segitiga lainnya (gambar no. 2). Pada contoh ini, saya menghilangkan sisi samping dan bawah. Caranya dengan mengubah kode warna menjadi transparan.

.segitiga {
     width:0;
     border-top:solid 20px #f00;
     border-right:solid 20px transparent;
     border-bottom:solid 20px transparent;
     border-left:solid 20px  transparent; }

Horray! kita mendapatkan sebuah segitiga! Pertanyaannya adalah untuk apa segitiga ini? Yeah, sebuah trik CSS menjadi tidak berguna jika tidak diterapkan pada web yang sesungguhnya. Saya menggunakannya untuk membuat balon percakapan (gambar no. 3). Caranya sangat mudah, kita hanya sedikit bermain-main dengan CSS positioning saja. Berikut ini contohnya:

.balon {
     position:relative;
     width:250px;
     background:#f00;
     padding:20px;
}

.segitiga {
     width:0;
     border-top:solid 20px #f00;
     border-right:solid 20px transparent;
     border-bottom:solid 20px transparent;
     border-left:solid 20px  transparent;
     position:absolute;
     bottom:-40px; /* ukuran sebesar 2 kali tebal border */
     left:50px; }

Dengan contoh kode HTML sebagai berikut:

<div class="balon">
Ini adalah balon percakapan yang dibuat dengan CSS, tanpa menggunakan gambar.
   <div class="segitiga"/>

</div>

Akhirnya jadilah sebuah balon percakapan yang sederhana. Tentu saja kita bisa menambahkan border-radius atau box-shadow untuk menciptakan tampilan yang lebih baik lagi.

Demo:

Comments