Cara menggunakan Generator Segitiga CSS
- Klik arah — atas, bawah, kiri, kanan, atau salah satu sudut.
- Atur lebar, tinggi, dan warnanya.
- Pilih Borders (berfungsi di semua browser, cocok untuk panah
::before/::after) atau clip-path (lebih mudah dibaca, mendukung gradien). - Salin CSS-nya ke elemen atau pseudo-element.
Dua cara membuat segitiga
Trik border: elemen dengan lebar dan tinggi nol hanya menampilkan border-nya, dan setiap border berupa segitiga yang bertemu di tengah. Buat tiga sisinya transparan dan sisi keempat berwarna, maka kamu mendapatkan panah tanpa perlu gambar. Ukurannya ditentukan oleh lebar border.
clip-path: kotak biasa dengan clip-path: polygon(50% 0, 100% 100%, 0 100%). Lebih mudah dibaca dan diatur ukurannya, dan bisa diisi dengan gradien atau gambar.
Contoh panah tooltip
.tooltip { position: relative; }
.tooltip::after {
content: "";
position: absolute; top: 100%; left: 50%; margin-left: -8px;
border: 8px solid transparent;
border-top-color: #111;
}Bentuk lainnya: Clip-path Generator, Border Radius Generator, SVG Blob Generator.
Juga dicari sebagai: segitiga css, panah css, panah tooltip css, border segitiga css, caret css, bentuk segitiga css, panah balon ucapan css.
Tool yang cocok dipakai bersama Generator Segitiga CSS
- Generator Box Shadow — Tumpuk beberapa lapis bayangan, atur offset, blur, spread dan opacity langsung di kartu pratinjau, lalu salin CSS box-shadow atau text-shadow.
- Generator CSS Mask — Buat gambar dan bagian halaman memudar perlahan alih-alih berakhir tegas: pudarkan satu tepi, atas dan bawah, keempat tepi, vignette radial atau spotlight, atau potong elemen menjadi garis-garis.
- CSS Grid Generator — Atur kolom, baris, dan gap, lalu seret di atas sel untuk membuat area seperti header, sidebar, dan main.
- Generator Animasi CSS — Desain animasi CSS di atas timeline keyframe sungguhan.
Pertanyaan yang sering diajukan
Bagaimana cara membuat segitiga di CSS?
Beri elemen width: 0 dan height: 0, lalu atur borders-nya: untuk panah ke atas, buat border kiri dan kanan transparan serta border bawah berwarna. Generator ini menuliskannya otomatis untuk arah dan ukuran apa pun.
Bagaimana cara menambahkan panah ke tooltip?
Tambahkan pseudo-element ::after dengan content: "", letakkan di tepi tooltip, lalu beri border segitiga dari generator.
Border triangle atau clip-path?
Border berfungsi di semua browser dan merupakan standar untuk panah kecil pada pseudo-element; clip-path lebih mudah diatur ukurannya dan mendukung gradien.
Apakah segitiga CSS bisa punya border atau shadow?
Bisa, tumpuk dua segitiga (satu sedikit lebih besar dengan warna border), atau gunakan clip-path pada wrapper dengan filter: drop-shadow() untuk membuat bayangan.
Bisakah saya memasang Generator Segitiga CSS sebagai aplikasi web dan memakainya offline?
Bisa. Generator Segitiga CSS adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.