Lewati ke konten
Toolars
Jelajahi
Laporkan bug

Desain · utilitas Lokal

Generator Segitiga CSS

CSS Triangle Generator

Buat segitiga CSS murni dari border menghadap empat arah dengan alas, tinggi, dan warna pilihan — tajam di resolusi apa pun tanpa berkas gambar.

Jalur tugas / dari masukan ke hasil

Pilih arah

Berjalan lokal · Tidak ada yang diunggah

Cara kerja Generator Segitiga CSS, privasi, dan alat terkait

Jalur tugas / dari masukan ke hasil

Cara membuat segitiga CSS

  1. 01

    Pilih arah

    Pilih Atas, Kanan, Bawah, atau Kiri di bagian Arah. Pratinjaunya langsung diperbarui — teknik ini mewarnai satu border dan membiarkan border di sampingnya transparan. Ruang kerja dimulai dengan segitiga menghadap ke atas.

  2. 02

    Atur ukuran

    Atur Lebar alas dan Tinggi segitiga dari 8 sampai 180 px dengan langkah 1 px. Untuk arah Atas/Bawah, lebar menjadi alas dan tinggi menjadi jarak ke ujung. Untuk Kiri/Kanan, tinggi menjadi alas vertikal dan lebar menjadi jangkauan horizontal. Ukuran awalnya 72 px secara horizontal dan 64 px secara vertikal.

  3. 03

    Pilih warna isian

    Atur Warna isian ke nilai heksadesimal enam digit mana pun — nilai defaultnya #0f4cff. Pratinjau langsung dan deklarasi border-color yang dihasilkan selalu sinkron, jadi apa yang Anda lihat persis seperti yang disalin.

  4. 04

    Periksa status pratinjau

    Pratinjau langsung dirender ulang pada setiap perubahan dan lencana statusnya berbunyi CSS VALID ketika semua nilai berada dalam rentang. Nilai di luar rentang mengubahnya menjadi PERIKSA NILAI dan memblokir penyalinan serta pengunduhan sampai kontrol yang disorot diperbaiki.

  5. 05

    Coba preset contoh

    Muat contoh menghasilkan segitiga menghadap kanan dengan jangkauan horizontal 104 px, alas vertikal 86 px, dan isian #ffd11a. Atur ulang mengembalikan nilai bawaan.

  6. 06

    Salin atau unduh CSS

    Tekan Salin CSS untuk menyalin aturan .triangle ke papan klip, atau Unduh .css untuk menyimpannya sebagai toolars-triangle.css. Aturan itu menetapkan lebar dan tinggi ke nol serta mendeklarasikan keempat border, siap ditempel ke stylesheet mana pun.

Fakta alat

Pemrosesan
Di browser Anda
Input meninggalkan perangkat
Tidak pernah
Retensi
Tidak ada yang disimpan
Harga
Gratis

Masukan Anda tetap di peramban.

Generator Segitiga CSS menggunakan jalur eksekusi lokal terverifikasinya dan tidak membuat riwayat masukan atau keluaran tersembunyi.

Eksekusi lokal

Berjalan di dalam tab peramban saat ini.

Tanpa pemrosesan tersembunyi

Data alat aktif tidak pernah menjadi catatan dokumen Toolars.

Tanpa perlu akun

Gunakan alur kerja inti tanpa membuat profil. Favorit disinkronkan ke akun Anda setelah masuk.

Atur ulang seketika

Bersihkan tab dan data kerja aktif pun hilang.

Apa yang sebenarnya dilakukan Generator Segitiga CSS

Tanda dropdown, penunjuk tooltip, dan pemisah breadcrumb semuanya butuh segitiga kecil yang tajam, dan berkas gambar adalah pilihan yang salah: buram di layar berkepadatan tinggi dan menambah satu permintaan ke halaman. Segitiga yang dibangun dari border CSS tidak bergantung pada resolusi dan bisa diganti warnanya dengan satu nilai heksa. Generator Segitiga CSS merender bentuknya secara lokal saat Anda menyesuaikan arah, ukuran, dan isian, sehingga mencoba-coba hanya butuh beberapa detik. Begitu terlihat pas, satu klik meletakkan aturan .triangle yang sudah jadi di papan klip Anda.

Pertanyaan umum

Bagaimana cara kerja segitiga CSS murni?
Elemennya diberi lebar dan tinggi nol plus empat border. Mewarnai satu border sambil membiarkan dua border yang bersebelahan transparan menyisakan segitiga yang bersih — aturan .triangle yang dihasilkan menunjukkan dengan tepat border mana yang membawa Warna isian untuk arah yang Anda pilih, dan border di seberang ujungnya menyusut ke nol.
Ukuran berapa yang bisa saya buat?
Lebar alas dan Tinggi segitiga sama-sama menerima nilai 8 hingga 180 px dengan kelipatan 1 px. Nilai di luar rentang mengubah status pratinjau menjadi PERIKSA NILAI dan memblokir penyalinan maupun pengunduhan sampai kontrol yang disorot diperbaiki, sehingga aturan yang diekspor selalu valid.
Apakah segitiganya selalu simetris?
Ya. Untuk Atas dan Bawah, kedua border samping yang transparan masing-masing mengambil setengah lebar alas, sehingga puncaknya tetap terpusat di atas alas; untuk Kiri dan Kanan, border atas dan bawah membagi tinggi dengan cara yang sama. Setiap segitiga yang dihasilkan adalah sama kaki — bentuk miring atau siku-siku memerlukan teknik lain seperti clip-path.
Bagaimana mengganti warna atau ukuran segitiganya nanti?
Sunting langsung aturan yang dihasilkan: hanya satu border yang membawa warna isian, dua border di sampingnya transparan, dan border di seberang ujungnya bernilai nol. Mengubah satu nilai heksa akan mengganti warnanya, dan menyesuaikan lebar border akan membentuknya ulang — generator tidak lagi diperlukan setelah salinan pertama.
Apakah hasilnya bekerja di semua peramban?
Ya. Segitiga berbasis border adalah salah satu teknik tertua di CSS dan tidak memerlukan dukungan gambar, SVG, atau clip-path, sehingga aturan yang dihasilkan dirender dengan cara yang sama di setiap peramban modern, pada kepadatan layar berapa pun, tanpa satu pun permintaan jaringan.
Apakah ada yang diunggah atau disimpan?
Tidak. Pratinjau dirender secara lokal dari nilai gaya yang tervalidasi, dan seperti dinyatakan di footer ruang kerja, tidak ada nilai yang dihasilkan masuk ke penyimpanan, log, analitik, atau jaringan.

Lanjutkan di Desain

Tugas terkait, bukan jalan buntu.

Pindah ke ruang kerja terfokus lainnya tanpa kembali ke indeks lengkap.

Generator Loader CSS

CSS Loader Generator

Rancang loader CSS cincin orbit atau tiga titik dengan ukuran, durasi, dan warna yang dapat disetel, lalu salin kode lengkap dengan blok prefers-reduced-motion.

Buat

Generator Checkbox CSS

CSS Checkbox Generator

Beri gaya kotak centang HTML asli dengan ukuran, border, dan warna pilihan, lalu salin CSS yang mempertahankan fokus keyboard dan status disabled.

Buat

Generator Switch CSS

CSS Switch Generator

Rancang sakelar alih murni CSS dengan geometri lintasan dan kenop yang dapat diukur, lalu salin kodenya dengan dukungan reduced-motion — tanpa JavaScript.

Buat

Generator Clip Path CSS

CSS Clip Path Generator

Edit titik poligon dengan menyeret, papan ketik, atau koordinat. Mulai dari empat prasetel dan salin deklarasi clip-path atau CSS lengkap secara lokal.

Buat