Pembuat Segitiga CSS Buat segitiga CSS menggunakan teknik border dengan kontrol arah dan warna.

🎨

Pembuat Segitiga CSS

Buat segitiga CSS menggunakan teknik border dengan kontrol arah dan warna.

Pilih Arah

Pilih arah yang diinginkan untuk segitiga: atas, bawah, kiri, atau kanan.

Sesuaikan Ukuran dan Warna

Atur ukuran segitiga dan pilih warna yang diinginkan.

Salin CSS

Pratinjau segitiga dan salin kode CSS berbasis border.

Loading tool...

What Is Pembuat Segitiga CSS?

Generator Segitiga CSS membuat segitiga menggunakan teknik perbatasan CSS, salah satu trik paling cerdas di CSS. Dengan mengatur lebar dan tinggi elemen menjadi nol dan menggunakan perbatasan transparan pada tiga sisi dengan perbatasan berwarna pada satu sisi, bentuk segitiga terbentuk. Alat ini memungkinkan Anda memilih arah segitiga (atas, bawah, kiri, kanan), menyesuaikan ukurannya, dan memilih warna apa saja. CSS yang dihasilkan ringan dan tidak memerlukan gambar atau SVG. Segitiga CSS umumnya digunakan untuk panah tooltip, indikator dropdown, pemisah breadcrumb, dan elemen desain dekoratif. Pratinjau menampilkan segitiga secara waktu nyata, dan kode siap disalin ke stylesheet Anda.

Why Use Pembuat Segitiga CSS?

Tidak perlu gambar-teknik border CSS murni
Empat pilihan arah dengan ukuran yang dapat disesuaikan
Alternatif ringan dan performant untuk panah berbasis gambar
Pratinjau instan dan salin kode satu-klik

Common Use Cases

Panah Tooltip

Buat penunjuk panah untuk tooltip CSS dan popovers.

Indikator Dropdown

Tambahkan indikator segitiga ke menu dropdown dan selector.

Pemisah Breadcrumb

Gunakan segitiga sebagai pemisah visual di navigasi breadcrumb.

Elemen Dekoratif

Tambahkan bentuk geometris ke pembagi bagian dan aksen desain.

Technical Guide

Teknik segitiga CSS memanfaatkan cara perbatasan bertemu di sudut elemen. Ketika sebuah elemen memiliki lebar dan tinggi nol, perbatasannya membentuk bentuk segitiga di mana mereka bertemu. Dengan membuat tiga perbatasan transparan dan satu perbatasan berwarna, sebuah segitiga yang menunjuk ke arah yang berlawanan dengan perbatasan berwarna dibuat. Misalnya, border-bottom: 50px solid biru dengan perbatasan kiri dan kanan transparan membuat segitiga yang menunjuk ke atas. Ukuran segitiga dikendalikan oleh nilai lebar perbatasan. Untuk segitiga sama sisi, semua lebar perbatasan harus sama. Untuk segitiga sama kaki, perbatasan berwarna dapat memiliki lebar yang berbeda. Teknik ini juga dapat membuat segitiga kanan dengan membuat hanya satu perbatasan tetangga transparan. Segitiga CSS dirender dengan tajam pada resolusi apa pun dan didukung di semua browser.

Tips & Best Practices

1
Arah segitiga berlawanan dengan arah border yang diwarnai
2
Gunakan lebar border yang sesuai untuk segitiga sama sisi
3
Gabungkan dengan pseudo-elemen ::before atau ::after untuk panah inline
4
Segitiga CSS dapat diputar dengan transform untuk sudut kustom

Related Tools

Pembuat Tooltip CSS

Buat tooltip murni CSS dengan posisi, panah, warna, dan gaya yang dapat disesuaikan.

🎨 CSS & Design

Pembuat Jalur Potong CSS

Buat bentuk jalur potong CSS dengan preset poligon, lingkaran, dan elips.

🎨 CSS & Design

Pembuat Blob CSS

Buat bentuk bola organik sebagai SVG dengan pengisian gradien dan randomisasi.

🎨 CSS & Design

Pembuat Pemisah CSS

Buat pemisah bagian CSS dengan beberapa gaya, termasuk gradien, bayangan, dan zigzag.

🎨 CSS & Design

Frequently Asked Questions

Q Bagaimana teknik segitiga CSS bekerja?

Dengan mengatur lebar/tinggi ke 0 dan menggunakan border transparan pada tiga sisi dengan border yang diwarnai pada satu sisi, border membentuk bentuk segitiga.

Q Bisakah saya membuat segitiga dengan sudut kustom?

Gunakan CSS transform: rotate() pada segitiga standar untuk mengarahkannya ke sudut apa pun.

Q Apakah segitiga CSS responsif?

Lebar border dalam piksel adalah tetap. Gunakan unit tampilan (vw, vh) atau JavaScript untuk pengaturan ukuran yang responsif.

Q Bisakah saya membuat bentuk lain dengan border?

Ya, dengan mengubah lebar border dan transparansi, Anda dapat membuat berbagai bentuk termasuk panah dan chevron.

Q Apakah ada alternatif modern untuk segitiga border?

Ya, clip-path: polygon() menawarkan pembuatan bentuk yang lebih fleksibel dengan kemampuan baca yang lebih baik.

About This Tool

Pembuat Segitiga CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.