Generator Segitiga CSS

Pilih arah, ukuran, dan warna untuk membuat segitiga dari CSS murni, lalu salin kodenya. Ini menggunakan teknik klasik div dengan lebar/tinggi nol beserta border transparan — tanpa file gambar, tanpa SVG, tanpa clip-path — hanya beberapa deklarasi border yang dipahami oleh semua peramban.

Apa Itu Alat Ini?

CSS tidak memiliki bentuk segitiga khusus, jadi segitiga dibuat dengan cara yang sudah dikenal luas: ambil elemen dengan lebar dan tinggi nol, beri border solid pada satu sisi dan border transparan pada dua sisi lain yang berdekatan. Karena border yang berdekatan bertemu pada sudut 45 derajat, border transparan meruncing hingga membentuk titik, sehingga hanya border berwarna yang terlihat sebagai segitiga.

Alat ini membangun struktur tersebut untuk Anda: pilih ke arah mana segitiga harus menghadap, seberapa besar ukurannya, dan warna apa, lalu lihat pratinjau langsung diperbarui dan salin CSS yang tepat. Ini adalah trik dasar yang sama yang digunakan di seluruh web untuk panah CSS murni, penunjuk tooltip, dan tanda panah dropdown.

Sumber: CSS Backgrounds and Borders Module Level 3, W3C — mendefinisikan bagaimana tepi border yang berdekatan bertemu membentuk sudut, yang merupakan mekanisme yang menjadi andalan teknik segitiga ini.

Mengapa Menggunakannya?

Pratinjau langsung merender segitiga sesungguhnya sehingga Anda dapat memastikan ukuran, arah, dan warna sebelum menyalin apa pun.
Mencakup keempat arah dasar — atas, bawah, kiri, kanan — dengan satu kontrol.
Tidak perlu file gambar atau SVG — segitiga yang dibuat dengan cara ini hanya beberapa baris CSS.
Berguna untuk penunjuk tooltip, tanda panah dropdown/akordeon, penanda daftar kustom, dan bentuk dekoratif sederhana.
Berjalan sepenuhnya di peramban Anda — tidak ada yang Anda konfigurasi yang diunggah ke mana pun.
Gratis, tanpa pendaftaran, berfungsi di ponsel.

Cara Menggunakan

Pilih arah — segitiga menghadap atas, bawah, kiri, atau kanan tergantung sisi mana yang mendapat border solid.
Atur ukuran — ini mengontrol nilai border-width pada ketiga sisi dan menentukan seberapa besar segitiga tampak.
Pilih warna untuk border yang terlihat (solid), yang menjadi warna isian segitiga.
Salin CSS yang dihasilkan dan terapkan pada elemen dengan width: 0 dan height: 0 — <div> kosong atau pseudo-element seperti ::before/::after keduanya berfungsi dengan baik.

Contoh

Input

Arah: bawah · Ukuran: 60px · Warna: #ea580c

Output

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

Untuk segitiga yang menghadap ke bawah, warna solid diletakkan pada border-top sementara border kiri dan kanan tetap transparan — sisi yang berlawanan dengan arah segitiga menghadap.

Mengapa lebar dan tinggi nol itu penting

Trik ini hanya berhasil karena elemen tidak memiliki content box sendiri — width: 0 dan height: 0 berarti seluruh bentuk yang terlihat murni berasal dari border yang bertemu di titik tengah. Jika elemen memiliki lebar atau tinggi apa pun, border tidak lagi meruncing ke titik yang bersih dan bentuknya rusak. Inilah juga alasan mengapa teknik ini bekerja sama baiknya pada <div> kosong maupun pada pseudo-element ::before/::after dengan content: "" — tidak diperlukan konten sesungguhnya, cukup content box border-nya saja.

Dokumentasi MDN tentang properti CSS border membahas bagaimana border-width, border-style, dan border-color digabungkan, termasuk bagaimana border pada sisi yang berdekatan bertemu secara diagonal (developer.mozilla.org/en-US/docs/Web/CSS/border) — fakta geometris yang menjadi dasar seluruh teknik ini.

Penggunaan umum segitiga CSS

Penunjuk tooltip dan balon percakapan: segitiga kecil (6–10px) diposisikan di tepi kotak membulat, diwarnai sesuai latar belakang kotak.
Tanda panah dropdown dan select: segitiga kecil menghadap bawah di samping tombol atau elemen select untuk menandakan bahwa itu membuka menu.
Indikator akordeon/perluasan: segitiga menghadap kanan yang berputar menghadap bawah saat bagian diperluas.
Penanda daftar kustom: segitiga kecil menghadap kanan menggantikan penanda default peramban, untuk gaya daftar yang lebih khas.
Sudut banner/pita sederhana: segitiga yang diselipkan ke sudut kartu untuk mensimulasikan efek pita terlipat.

Memadukan dengan alat CSS lainnya

Segitiga yang digunakan sebagai penunjuk tooltip biasanya memerlukan bayangan yang serasi agar terlihat menyatu secara visual dengan kotak yang ditempelinya — Generator Box Shadow menghasilkan bayangan tersebut. Untuk bentuk UI di luar segitiga (chevron, bintang, heksagon), clip-path umumnya merupakan pendekatan modern yang lebih baik daripada menumpuk lebih banyak trik border.

→ Generator Box Shadow · Generator Border Radius

Pertanyaan yang Sering Diajukan

Mengapa warna diletakkan pada border yang berlawanan dengan arah segitiga menghadap?

Bayangkan elemen tersebut sebagai wajik yang terdiri dari empat segmen border segitiga yang bertemu di tengah. Jika warna solid ada di border atas, bentuk yang terlihat menempati separuh atas — tetapi karena elemen berukuran nol, segitiga 'separuh atas' itu sebenarnya menghadap ke bawah, ke arah tempat content box elemen yang sebenarnya tidak ada itu seharusnya berada. Logika yang sama berlaku untuk keempat arah.

Bisakah saya membuat segitiga yang bukan sama kaki sempurna?

Bisa — alat ini selalu menghasilkan segitiga simetris demi kesederhanaan, tetapi Anda dapat mengedit CSS yang disalin secara manual setelahnya. Membuat dua border-width transparan tidak sama akan memiringkan segitiga ke satu sisi; mengubah lebar border solid secara independen mengubah tingginya tanpa memengaruhi lebar dasarnya.

Apakah teknik ini berfungsi di semua peramban?

Ya — trik segitiga berbasis border hanya bergantung pada dukungan dasar border-width, border-style, dan border-color, yang sudah ada sejak implementasi CSS paling awal. Ini adalah salah satu teknik bentuk CSS murni dengan kompatibilitas terluas yang tersedia.

Kapan saya harus menggunakan clip-path alih-alih trik border?

Trik border sangat ideal khusus untuk segitiga sederhana, karena tidak memerlukan properti tambahan dan berfungsi di mana saja. Untuk sesuatu yang lebih kompleks — segi lima, bintang, panah dengan takik, atau potongan diagonal pada kotak yang masih perlu menampilkan gambar latar — clip-path lebih fleksibel dan lebih mudah dipahami, meskipun dukungan pada peramban lama lebih terbatas.

Bisakah saya menaruh teks atau ikon di dalam segitiga?

Tidak secara langsung — karena elemen segitiga memiliki lebar dan tinggi nol, tidak ada content box untuk menampung apa pun. Untuk menggabungkan segitiga dengan teks atau ikon, gunakan sebagai pseudo-element dekoratif (::before/::after) pada elemen induk yang memposisikannya secara absolut, lalu beri gaya konten sesungguhnya dari induk tersebut secara terpisah.