Membuat bentuk segitiga hanya dengan CSS

Tahukah kamu kalau bentuk-bentuk seperti di bawah ini bisa dibuat hanya dengan CSS saja, tanpa gambar?

• Depan
• Galeri
• Jalan-jalan ke luar angkasa

Membentuk balon percakapan dengan sudut melengkung mungkin tidak jadi masalah karena kini sudah ada aturan border-radius sejak CSS3. Tapi bagaimana dengan sudut lancip di bagian bawahnya? Bagaimana cara membuat border lancip di antara menu navigasi? Intinya sederhana. Yaitu dengan menempelkan bentuk segitiga pada elemen tersebut. Masalahnya, aturan CSS apa yang bisa dipakai untuk membuat segitiga?

Border Top, Left, Bottom

Hanya satu aturan CSS yang kita perlukan: border. Ya, border.

Dalam CSS kita bisa memberi border yang berbeda-beda pada setiap sisinya. Coba lihat contoh berikut ini.

<div class="segitiga"></div>
<style>
.segitiga {
    border-top: solid 20px #f00;
    border-bottom: solid 20px #f00;
    border-left: solid 20px #f80;
    border-right: solid 20px #f80;
}
</style>

Kalau dilihat, bagian sudut kiri atas dan bawah berbentuk diagonal. Kalau tinggi div dijadikan 0px, dan border atas dan bawah diberi warna transparan, lalu border kanan dibuang, maka kita akan dapatkan bentuk segitiga!

<div class="segitiga"></div>
<style>
.segitiga {
    border-top: solid 20px transparent;
    border-bottom: solid 20px transparent;
    border-left: solid 20px #f80;
    height: 0;
    width: 0;
}
</style>

Dari bentuk dasar ini kita bisa sesuaikan lebih lanjut. Untuk membuat segitiga lebih lancip, tambahkan tebal border kiri (border-left) atau kurangi tebal border atas dan bawah (border-top, border-bottom). Untuk border yang lancip ke arah kanan, beri warna pada border kiri. Untuk border yang lancip ke arah bawah, beri warna pada border sebaliknya, yaitu border atas. Dan seterusnya.

Balon Percakapan

Sekarang mari kita coba terapkan dalam contoh balon percakapan seperti di atas. Untuk HTML, kita hanya perlu satu <DIV> saja.

<div class="balon">
    Halo apa kabar?
</div>
<style>
.balon {
    max-width: 280px;
    border-radius: 10px;
    padding: 10px;
    background: #4e9a06;
    color: #fff;
}
</style>

Sekarang, kita tempelkan segitiga di bawah balon. Karena hanya menggunakan satu DIV, segitiga ini bisa dibuat dengan memanfaatkan pseudo-element after. Supaya segitiga bisa bebas diposisikan relatif terhadap balon, maka kita beri position: relative; pada .balon dan beri position: absolute; pada segitiga.

<style>
.balon {
    position: relative;
    max-width: 280px;
    border-radius: 10px;
    padding: 10px;
    background: #4e9a06;
    color: #fff;
    margin-bottom: 20px;
}

.balon:after {
    position: absolute;
    content: '';
    display: block;
    position: absolute;
    bottom: -20px;
    left: 30px;
    border-top: solid 20px #4e9a06;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;
}
</style>

Breadcrumb

Contoh berikutnya yang lebih rumit yaitu membuat navigasi ala breadcrumb. Bagaimana caranya membuat garis panah? Dengan border kita bisa buat segitiga, tapi bagaimana membuat garis di pinggirannya saja kalau kita sudah pakai aturan CSS border? Caranya, dengan menumpuk dua segitiga!

Coba lihat dua buah segitiga di bawah ini.

Apa jadinya kalau kita tumpuk kedua segitiga, lalu geser segitiga yang di bawah sedikit ke kanan? Ubah warna segitiga yang atas menyerupai warna latar. Ya! Kita dapatkan segitiga berupa garisnya saja!

<div class="container">
<div class="segitiga1">.</div>
<div class="segitiga2">.</div>
</div>
<style>
.container {
    position: relative;
    height: 40px;
}

.segitiga1 {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: solid 20px #ccc;
    border-top: solid 20px transparent;
    border-bottom: solid 20px transparent;
}

.segitiga2 {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 2px;
    width: 0;
    height: 0;
    border-left: solid 20px #000;
    border-top: solid 20px transparent;
    border-bottom: solid 20px transparent;
}
</pre>

Sekarang, mari kita buat struktur navigasinya menggunakan elemen UL. Gunakan float: left; supaya tiap menu bisa dideretkan dalam satu baris.

• Depan
• Galeri
• Jalan-jalan ke luar angkasa

<ul class="breadcrumb">
    <li><a href="#">Depan</a></li>
    <li><a href="#">Galeri</a></li>
    <li><a href="#">Jalan-jalan ke luar angkasa</a></li>
</ul>
<style>
.breadcrumb {
    position: relative;
    border-radius: 5px;
    background: #ccc;
    color: #000;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb:after {
    display: block;
    clear: both;
    content: '';
}

.breadcrumb li {
    float: left;
}

.breadcrumb a {
    position: relative;
    display: block;
    padding: 10px 15px;
    line-height: 20px;
    color: #000;
}
</style>

Tambahkan dua segitiga di depan dan belakang tiap menu menggunakan pseudo-element before dan after. Jangan lupa set posisi a menjadi relative. Khusus untuk segitiga awal dan akhir, tidak perlu ditampilkan.

.breadcrumb a:after {
    content: '';
    display: block;
    position: absolute;
    z-index: 2;
    right: -4px;
    top: 0;
    border-left: solid 10px #ccc;
    border-top: solid 20px transparent;
    border-bottom: solid 20px transparent;
}

.breadcrumb a:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    left: -5px;
    top: 0;
    border-left: solid 10px #888;
    border-top: solid 20px transparent;
    border-bottom: solid 20px transparent;
}

.breadcrumb li:first-child a:before,
.breadcrumb li:last-child a:after {
    display: none;
}

Selesai! Mari lihat hasilnya:

• Depan
• Galeri
• Jalan-jalan ke luar angkasa

Semoga dua contoh di atas cukup. Untuk contoh-contoh lainnya silakan dicoba sendiri, pasti bisa, karena kamu kan seorang jagoan koding!