Generator Triangle CSS

Trik Border: Hack CSS Berusia 25 Tahun yang Masih Berfungsi

Teknik segitiga CSS memanfaatkan cara algoritma pewarnaan border CSS menangani border yang berdekatan. Ketika dua border bertemu di sudut, batas di antara mereka digambar sebagai garis diagonal pada sudut yang membagi dua sudut. Dengan elemen berukuran normal, sudutnya kecil dan diagonalnya hampir tidak terlihat. Tetapi jika Anda mengatur lebar dan tinggi elemen ke nol dan memberinya border tebal, sudut-sudut mengambil alih seluruh ruang visual: dan apa yang dulunya merupakan diagonal yang tidak terlihat menjadi tepi segitiga yang terlihat. Buat tiga dari empat border transparan, biarkan yang keempat berwarna, dan Anda telah menggambar satu segitiga yang menunjuk menjauh dari sisi yang berwarna. Teknik ini pertama kali didokumentasikan secara luas sekitar 2007-2008 dalam artikel CSS-tricks awal oleh Chris Coyier dan lainnya; itu telah menjadi pokok perangkat desainer web sejak saat itu karena menghasilkan bentuk yang tajam, dapat diskalakan, dan dapat diwarnai-hex tanpa SVG, tanpa PNG, tanpa permintaan HTTP tambahan, dan tanpa CSS yang rumit. Matematikanya sederhana tetapi berlawanan dengan intuisi (tinggi segitiga adalah border-width sisi berwarna; basisnya adalah dua kali border-width sisi transparan yang berdekatan). Generator ini menangani matematika sehingga Anda dapat menyeret slider alih-alih menghitung border-width.

Alternatif Modern: clip-path, SVG, conic-gradient

Pada 2026, segitiga trik-border memiliki saingan. CSS clip-path dengan fungsi polygon() (CSS Masking Module Level 1, dukungan browser baseline sejak 2017) memungkinkan Anda memotong elemen apa pun ke poligon sembarang: clip-path: polygon(50% 0, 100% 100%, 0 100%) menggambar segitiga yang menunjuk ke atas pada elemen apa pun. clip-path lebih fleksibel (jumlah simpul berapa pun, bukan hanya tiga; bekerja pada elemen apa pun dengan konten di dalamnya, bukan hanya div kosong), berkomposisi lebih baik dengan transformasi dan animasi, dan mendukung sudut yang dibulatkan melalui fungsi shape() yang lebih baru. SVG inline (<svg><polygon points="50,0 100,100 0,100"/></svg>) memberi Anda kontrol terbanyak: stroke, fill, gradien, animasi melalui SMIL atau CSS, aksesibilitas melalui elemen <title>. conic-gradient dapat menghasilkan bentuk segitiga melalui titik henti warna yang ditempatkan dengan cerdik, meskipun ini lebih merupakan keingintahuan daripada pola praktis. Segitiga trik-border tetap menjadi pilihan yang tepat untuk kasus dekoratif sederhana (penunjuk tooltip, caret dropdown, ekor balon ucapan) di mana kesederhanaan dan biaya nol lebih penting daripada fleksibilitas; clip-path lebih baik ketika segitiga adalah bagian dari bentuk yang lebih kompleks, ketika Anda perlu memasukkan teks di dalamnya, atau ketika desain mungkin memerlukan sudut yang dibulatkan.

Di Mana Segitiga CSS Memperoleh Nafkahnya

• Penunjuk tooltip dan popover. Segitiga kecil yang menghubungkan gelembung tooltip ke elemen jangkarnya adalah kasus penggunaan yang paling umum: Anda dapat membangunnya sebagai elemen pseudo segitiga CSS (::before atau ::after) pada tooltip, ditempatkan di atas tepi yang menghadap jangkar.
• Ekor balon ucapan. Ekor runcing pada gelembung pesan obrolan, kartu komentar, dan callout kutipan. Teknik yang sama dengan penunjuk tooltip, hanya lebih besar dan ditata agar sesuai dengan warna latar belakang gelembung.
• Indikator caret dropdown. Segitiga kecil yang mengarah ke bawah pada kotak pilihan dan tombol menu dropdown. Elemen <select> asli memiliki caret bergaya OS; dropdown khusus yang dibangun dari <button> + popover memerlukan miliknya sendiri.
• Indikator perluas/tutup akordeon. Segitiga yang berbalik antara mengarah-ke-kanan (tertutup) dan mengarah-ke-bawah (diperluas) ketika Anda mengklik bagian akordeon. Dianimasikan dengan transformasi rotasi CSS.
• Pemisah breadcrumb. Segitiga yang mengarah ke kanan antara tautan breadcrumb. Sering dibangun sebagai segitiga CSS dengan ::before.
• Dekorasi banner dan pita. Takik segitiga di ujung banner penjualan atau tag, lipatan sudut pada lencana "baru", chevron di bagian bawah bagian hero yang menunjuk ke bawah untuk menggulir. Semua segitiga warna tunggal, semua trik-border.
• Pemisah dekoratif. Sederetan segitiga kecil sebagai pemisah bagian, overlay pola geometris, hiasan bergaya retro.

Pertimbangan Aksesibilitas

Segitiga CSS adalah dekorasi visual murni: mereka tidak memiliki makna semantik dan tidak ada kehadiran dalam pohon aksesibilitas. Pembaca layar tidak mengumumkannya. Untuk penggunaan dekoratif murni (ekor balon ucapan, pemisah breadcrumb) ini adalah perilaku yang benar. Untuk segitiga yang menyampaikan makna (panah yang menunjuk ke bagian aktif, caret dropdown yang menunjukkan "klik untuk lebih"), maknanya perlu dikomunikasikan melalui cara lain: atribut aria-expanded pada pemicu dropdown, label teks yang terlihat, aria-label pada tombol. Jangan mengandalkan segitiga CSS untuk mengkomunikasikan status; perlakukan itu sebagai penguat visual dari status yang dikomunikasikan secara semantik melalui atribut lain. Konten elemen pseudo CSS ::before dan ::after umumnya tidak dibaca oleh pembaca layar, yang sesuai untuk bentuk dekoratif.

Tipe Segitiga yang Dihasilkan Generator Ini

• Atas / Bawah, menunjuk ke atas atau bawah (sama kaki)
• Kiri / Kanan, menunjuk ke kiri atau kanan
• Kiri-atas / Kanan-atas, segitiga sudut
• Kiri-bawah / Kanan-bawah, segitiga sudut menunjuk ke arah berlawanan
• Tampilan kustom, rasio lebar/tinggi yang dapat disesuaikan untuk bentuk non-sama sisi

Alat terkait