Kategori: Alat pengembang
Generator Segitiga CSS
Buat segitiga CSS murni dengan trik border
Pilih arah, ukuran, dan warna untuk membuat kotak berukuran nol dengan border berwarna yang tampil sebagai segitiga, lengkap dengan pratinjau langsung dan deklarasi CSS siap salin. Semuanya dihitung di browser Anda.
width: 0; height: 0; border-right: 80px solid transparent; border-bottom: 80px solid #0f7b63; border-left: 80px solid transparent;
Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.
Apa fungsi alat ini
Segitiga CSS adalah kotak `width: 0; height: 0;` yang salah satu sisi bordernya diberi warna sementara dua sisi di sebelahnya dibuat transparan, sehingga hanya sudut lancip dari border berwarna itu yang tampak. Ini mudah terbalik jika dibuat manual — pasangan sisi yang salah, atau border yang lupa dibuat transparan — sehingga alat ini menyusun keempat deklarasi dari arah, ukuran, dan warna, lalu menampilkan hasilnya pada kotak nyata saat Anda mengubahnya.
Cara memakainya
- Pilih arah: atas, bawah, kiri, atau kanan.
- Atur ukuran dan warnanya.
- Salin deklarasi border ke dalam stylesheet Anda.
Privasi
Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.
Pertanyaan yang sering diajukan
- Apakah ada yang dikirim ke server?
- Tidak. Pratinjaunya adalah border CSS sungguhan yang dirender oleh browser Anda, dan deklarasinya adalah teks yang disusun di halaman.
- Mengapa segitiga ini perlu width dan height diatur ke 0?
- Trik border ini mengandalkan border yang bertemu di satu titik, bukan membingkai sebuah kotak. Width atau height yang bukan nol akan meratakan sudut lancip itu menjadi trapesium.
- Bisakah ini dipakai untuk panah pada tooltip atau balon percakapan?
- Bisa — itulah penggunaan paling umum. Posisikan segitiga secara absolut pada tepi tooltip dan cocokkan warnanya dengan latar belakang tooltip.