Generator Segitiga CSS

Generator segitiga CSS ini membuat segitiga murni-CSS untuk Anda secara visual, jadi Anda tidak perlu lagi menghitung sendiri lebar border atau koordinat clip-path. Pilih arah, atur ukuran dan warna, lalu salin CSS yang siap tempel untuk panah tooltip, caret dropdown, chevron breadcrumb, atau pita sudut (corner ribbon).

Tool ini mendukung dua teknik klasik. Trik border mengatur lebar dan tinggi elemen menjadi nol lalu membentuk segitiga berwarna dari border transparan, dan berfungsi di setiap peramban. Clip-path memakai clip-path: polygon() pada kotak berwarna untuk kode yang lebih rapi dan mudah dibaca di peramban modern. Keduanya menghasilkan bentuk yang sama, dan Anda bisa membandingkan keduanya berdampingan sebelum menyalin.

Privat secara desain: setiap segitiga dibuat secara lokal di peramban Anda. Tidak ada konfigurasi yang Anda buat pernah diunggah ke server.

Cara Memakai

Pilih arah

Klik salah satu dari 8 tombol pada grid arah. Empat arah utama (Atas, Kanan, Bawah, Kiri) membuat segitiga standar, sementara empat arah diagonal (Kiri Atas, Kanan Atas, Kiri Bawah, Kanan Bawah) membuat segitiga sudut siku-siku.

Atur ukuran

Geser slider Lebar dan Tinggi atau ketik nilai persis dari 1 sampai 500 piksel. Aktifkan Kunci rasio aspek agar kedua dimensi tetap sama — mengubah salah satu akan memperbarui yang lain.

Pilih warna

Gunakan pemilih warna untuk warna kustom apa pun, atau klik salah satu contoh warna preset untuk pilihan cepat. Pratinjau dan kode yang dihasilkan diperbarui seketika.

Pilih metode dan salin

Ganti Metode antara Border dan Clip-path, gunakan tab kode untuk membandingkan keduanya, lalu klik Salin CSS untuk mengirim kode langsung ke clipboard Anda. Tekan Atur Ulang kapan saja untuk kembali ke nilai awal.

Fitur

8 Arah

Arahkan segitiga ke Atas, Kanan, Bawah, atau Kiri untuk bentuk standar, atau pakai empat arah diagonal untuk segitiga sudut siku-siku.

Kontrol Ukuran Presisi

Atur lebar dan tinggi secara mandiri dari 1 sampai 500px dengan slider atau input angka, dan kunci rasio aspek untuk penskalaan proporsional.

Kustomisasi Warna

Pilih warna apa pun dengan pemilih warna native atau pilih dari 8 contoh warna preset: indigo, gelap, putih, merah, hijau, biru, amber, dan ungu.

Metode Border & Clip-path

Hasilkan kode dengan trik border transparan klasik untuk dukungan maksimal, atau poligon clip-path untuk CSS modern yang lebih rapi.

Pratinjau Langsung

Lihat segitiga Anda dirender secara real-time di atas latar papan catur, dengan bilah info yang menampilkan dimensi dan arah saat ini.

Pratinjau Skala Otomatis

Segitiga besar otomatis diperkecil agar pas di area pratinjau sambil tetap menjaga proporsi yang akurat.

12 Preset Bawaan

Mulai dari bentuk umum — panah ke empat arah, panah tipis dan lebar, panah tooltip, sebuah caret, segitiga sudut, dan bendera.

Tab Kode Ganda

Lihat dan bandingkan CSS yang dihasilkan untuk kedua metode dengan pengalih tab; kode diperbarui seketika saat Anda mengubah pengaturan apa pun.

Salin Sekali Klik

Salin CSS untuk metode aktif ke clipboard Anda dengan satu klik, siap ditempel ke stylesheet Anda.

Atur Ulang ke Nilai Awal

Kembalikan arah, ukuran, warna, dan metode ke nilai awalnya kapan saja dengan tombol Atur Ulang.

Pertanyaan yang Sering Diajukan

Bagaimana cara membuat segitiga di CSS?

Dua cara umum adalah trik border dan clip-path. Dengan generator ini Anda cukup memilih arah, ukuran, dan warna, lalu menyalin CSS — tidak ada perhitungan yang perlu dikerjakan manual. Pilih metode Border untuk dukungan peramban terluas, atau Clip-path untuk kode modern yang lebih rapi.

Bagaimana trik border CSS membentuk segitiga?

Ketika sebuah elemen punya lebar dan tinggi nol, keempat bordernya bertemu di sepanjang garis diagonal. Dengan membuat sebagian border transparan dan menyisakan satu border berwarna, hanya area segitiga dari border berwarna itu yang tetap terlihat, sehingga membentuk bentuk segitiga.

Sebaiknya pakai trik border atau clip-path?

Gunakan trik border saat Anda perlu mendukung peramban yang sangat lama, karena teknik ini berfungsi di mana saja. Gunakan clip-path untuk proyek modern di mana Anda ingin CSS yang lebih pendek dan mudah dibaca dengan lebar serta tinggi yang eksplisit. Keduanya menghasilkan segitiga yang terlihat identik, jadi Anda bisa mengganti Metode dan membandingkannya.

Bagaimana cara mengubah arah segitiga?

Klik salah satu dari 8 tombol arah. Arah utama (Atas, Kanan, Bawah, Kiri) membuat segitiga standar yang menunjuk ke arah itu, sementara arah diagonal (Kiri Atas, Kanan Atas, Kiri Bawah, Kanan Bawah) membuat segitiga sudut siku-siku untuk pita dan efek sudut terlipat.

Bisakah saya membuat segitiga sama sisi?

Bisa. Untuk segitiga yang terlihat sama sisi menunjuk ke atas atau bawah, atur lebar menjadi sekitar 1,15× tingginya (misalnya 115×100). Untuk segitiga sama sisi yang persis secara matematis, lebar harus sama dengan tinggi × 2 / √3.

Kenapa segitiga saya terlihat buram di ukuran kecil?

Segitiga yang sangat kecil (di bawah sekitar 10px) bisa tampak buram karena rendering sub-piksel, yang merupakan keterbatasan peramban dan bukan masalah pada kodenya. Gunakan ukuran sedikit lebih besar, atau pilih dimensi yang menghasilkan nilai border piksel bulat, agar tepiannya tetap tajam.

Bisakah saya menganimasikan segitiga CSS?

Bisa. Segitiga trik border bisa menganimasikan border-width dan border-color-nya. Segitiga clip-path lebih fleksibel — Anda bisa menganimasikan titik poligon, warna latar, lebar, dan tinggi untuk transisi bentuk yang mulus.