A Jar of Minds

Tutorials, and other (non) techie stuff

Membuat bentuk segitiga hanya dengan CSS

January 8, 2016 • Bahasa Indonesia, CSS

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

Halo apa kabar?

 

 

Rayuan Pulau Kelapa
Tanah Airku Indonesia
Negeri Elok Amat Ku Cinta
Tanah Tumpah Darahku Yang Mulia
Yang Ku Puja Sepanjang Masa
Tanah Airku Aman dan Makmur
Pulau Kelapa Yang Amat Subur
Pulau Melati Pujaan Bangsa
Sejak Dulu Kala

 

Meramu Koding

 

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.

 

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

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!

 

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

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.

HTML

&lt;div class="balon"&gt;
    Halo apa kabar?
&lt;/div&gt;

CSS

.balon {
    max-width: 280px;
    border-radius: 10px;
    padding: 10px;
    background: #4e9a06;
    color: #fff;
}
Halo apa kabar?

 

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.

CSS

.balon {
    position: relative;
    max-width: 280px;
    border-radius: 10px;
    padding: 10px;
    background: #4e9a06;
    color: #fff;
}

.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;
}
Halo apa kabar?

 

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!

.
.

 

HTML

&lt;div class="container"&gt;
    &lt;div class="segitiga1"&gt;&lt;/div&gt;
    &lt;div class="segitiga2"&gt;&lt;/div&gt;
&lt;/div&gt;

CSS

.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;
}

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

 

HTML

&lt;ul class="breadcrumb"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Depan&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Galeri&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Jalan-jalan ke luar angkasa&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

CSS

.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;
}

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.

CSS

.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:

 

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