Tentu, ini artikel mengenai cara membuat bentuk segitiga menggunakan CSS.

Saat kita berbicara tentang CSS, kita seringkali berpikir untuk menata kotak—mengatur lebar, tinggi, warna latar, dan padding. Namun, kekuatan CSS jauh melampaui itu. Salah satu trik klasik yang paling berguna dan cerdas adalah kemampuan untuk membuat bentuk geometris murni seperti segitiga, tanpa memerlukan gambar atau SVG.

Teknik ini sangat berguna untuk membuat panah indikator pada menu dropdown, gelembung percakapan (tooltip), atau elemen dekoratif lainnya. Artikel ini akan mengupas tuntas bagaimana cara kerjanya, dari konsep dasar hingga contoh praktis.

Konsep Utama: Rahasia di Balik Properti border

Kunci untuk membuat segitiga murni dengan CSS terletak pada cara browser merender border (garis tepi) pada sebuah elemen. Mungkin ini terdengar aneh, tetapi mari kita visualisasikan.

Bayangkan sebuah kotak dengan border yang sangat tebal dan setiap sisinya memiliki warna yang berbeda.

HTML:

<div class="box-border"></div>

CSS:

.box-border {
  width: 100px;
  height: 100px;

  border-style: solid;
  border-width: 50px;

  border-top-color: tomato;
  border-right-color: gold;
  border-bottom-color: royalblue;
  border-left-color: seagreen;
}

Hasilnya akan menunjukkan bahwa sudut-sudut di mana border bertemu tidaklah lurus, melainkan diagonal. Inilah “aha!” momennya. Browser menyambungkan tepi border secara miring.

Sekarang, apa yang terjadi jika kita membuat width dan height elemen tersebut menjadi 0?

.box-border {
  width: 0;
  height: 0;
  /* Properti border lainnya tetap sama */
}

Ketika tidak ada lagi ruang untuk konten (karena width dan height adalah nol), keempat border segitiga tersebut akan saling mendorong hingga bertemu di satu titik pusat. Kita sekarang memiliki empat segitiga dalam satu elemen!

Langkah-langkah Membuat Satu Segitiga

Dari konsep di atas, kita hanya perlu satu langkah lagi untuk mengisolasi satu segitiga yang kita inginkan: membuat tiga sisi lainnya transparan.

1. Atur Dimensi Nol: Tetapkan width: 0; dan height: 0; pada elemen Anda.
2. Definisikan Border: Atur border-style: solid; dan tentukan ketebalan border dengan border-width. Ketebalan ini akan menentukan ukuran segitiga.
3. Beri Warna & Buat Transparan: Beri warna pada satu sisi border dan atur warna tiga sisi lainnya menjadi transparent.

Contoh Kode: Membuat Berbagai Arah Segitiga

Mari kita buat empat kelas CSS untuk segitiga yang menghadap ke atas, bawah, kanan, dan kiri.

HTML:

<p>Segitiga ke Atas:</p>
<div class="segitiga-atas"></div>

<p>Segitiga ke Bawah:</p>
<div class="segitiga-bawah"></div>

<p>Segitiga ke Kanan:</p>
<div class="segitiga-kanan"></div>

<p>Segitiga ke Kiri:</p>
<div class="segitiga-kiri"></div>

CSS:

/* Base styles - not needed, but good practice for demonstration */
[class^="segitiga"] {
  width: 0;
  height: 0;
  border-style: solid;
  margin-bottom: 20px;
}

/* Segitiga Menghadap ke Atas */
.segitiga-atas {
  border-width: 0 25px 50px 25px; /* top, right, bottom, left */
  border-color: transparent transparent royalblue transparent;
}

/* Segitiga Menghadap ke Bawah */
.segitiga-bawah {
  border-width: 50px 25px 0 25px;
  border-color: royalblue transparent transparent transparent;
}

/* Segitiga Menghadap ke Kanan */
.segitiga-kanan {
  border-width: 25px 0 25px 50px;
  border-color: transparent transparent transparent royalblue;
}

/* Segitiga Menghadap ke Kiri */
.segitiga-kiri {
  border-width: 25px 50px 25px 0;
  border-color: transparent royalblue transparent transparent;
}

Penjelasan border-width & border-color:

• Segitiga ke Atas: Kita menginginkan border bawah (border-bottom) menjadi segitiga yang terlihat. Jadi, kita memberinya ketebalan (50px) dan warna. border-left dan border-right (25px) berfungsi sebagai “penopang” bentuk segitiga, sedangkan border-top memiliki ketebalan 0.
• Segitiga ke Bawah: Kebalikan dari yang di atas, kita memberi warna dan ketebalan pada border-top.
• Dan begitu seterusnya untuk arah kiri dan kanan.

Studi Kasus: Membuat Panah Tooltip

Teknik ini sangat populer untuk membuat panah pada kotak tooltip.

HTML:

<div class="tooltip-container">
  Arahkan kursor ke sini
  <div class="tooltip-box">
    Halo! Ini adalah tooltip.
    <div class="segitiga-bawah"></div>
  </div>
</div>

CSS:

.tooltip-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip-box {
  visibility: hidden;
  width: 160px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Posisikan di atas container */
  left: 50%;
  margin-left: -80px; /* Pusatkan tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tampilkan tooltip saat hover */
.tooltip-container:hover .tooltip-box {
  visibility: visible;
  opacity: 1;
}

/* Styling untuk panah segitiga */
.tooltip-box .segitiga-bawah {
  width: 0;
  height: 0;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  position: absolute;
  top: 100%; /* Letakkan di bagian bawah tooltip-box */
  left: 50%;
  margin-left: -10px;
}

Alternatif Modern: Properti clip-path

Meskipun trik border sangat andal dan didukung oleh semua browser, CSS modern menawarkan cara yang lebih langsung, yaitu menggunakan properti clip-path. Properti ini memungkinkan Anda “memotong” sebuah elemen menjadi bentuk dasar.

.segitiga-clip-path {
  width: 100px;
  height: 100px;
  background-color: royalblue;
  /* Mendefinisikan tiga titik untuk membentuk segitiga */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Kelebihan clip-path:

• Lebih intuitif.
• Elemen yang dipotong masih bisa memiliki background, gradient, atau bahkan gambar di dalamnya.

Kekurangan:

• Dukungan browser untuk path yang kompleks mungkin tidak seluas trik border, meskipun untuk polygon dasarnya sudah sangat baik.

Kesimpulan

Trik membuat segitiga menggunakan properti border adalah contoh klasik dari kreativitas komunitas web dalam memanfaatkan CSS di luar tujuan awalnya. Ini adalah teknik yang solid, andal, dan penting untuk diketahui. Meskipun clip-path hadir sebagai alternatif yang lebih modern dan fleksibel, memahami cara kerja trik border akan memberi Anda pemahaman yang lebih dalam tentang bagaimana model rendering CSS bekerja.