Generator

Generator Segitiga CSS

Hasilkan segitiga CSS menggunakan trik border dengan 8 arah, ukuran kustom, dan warna.

Ctrl+Enter Copy CSS Esc Reset

Arah

Lebar (px)

Tinggi (px)

Warna

Pratinjau

Output CSS

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #3b82f6;
}

Tentang Generator Segitiga CSS

Segitiga CSS dibuat menggunakan trik border — elemen dengan lebar dan tinggi nol serta border berwarna/transparan membentuk segitiga. Alat ini memungkinkan Anda memilih arah, ukuran, dan warna, lalu langsung menghasilkan kode CSS.

Jelajahi semua alat Generator

Cara Menggunakan

Pilih arah (Atas, Bawah, Kiri, Kanan, atau diagonal), sesuaikan slider lebar dan tinggi, pilih warna, dan salin CSS yang dihasilkan. Tempel di stylesheet Anda dan terapkan kelas .triangle.

Kasus Penggunaan Umum

Membuat indikator panah dan pointer di UI
Membangun panah tooltip dan caret dropdown
Mendesain pembagi seksi diagonal dekoratif
Membuat pemisah breadcrumb dan ikon chevron
Gelembung ucapan CSS murni dengan ekor segitiga

Cara Menggunakan Generator Segitiga CSS Istirahat sejenak dan mainkan game browser gratis

Ulasan

Baca dan tulis ulasan alat→

Diskusikan alat ini→