Penjana CSS Triangle

Pilih arah, saiz dan warna untuk bina segitiga daripada CSS biasa, kemudian salin kodnya. Ini menggunakan teknik klasik div lebar-sifar/tinggi-sifar dengan border lutsinar — tiada fail imej, tiada SVG, tiada clip-path — hanya beberapa deklarasi border yang difahami mana-mana pelayar.

Apakah alat ini?

CSS tiada bentuk segitiga khusus, jadi segitiga dibina dengan helah terkenal: ambil elemen dengan lebar sifar dan tinggi sifar, berikan border pejal pada satu sisi dan border lutsinar pada dua sisi bersebelahan yang lain. Kerana border bersebelahan bertemu pada sudut 45 darjah, border lutsinar itu meruncing kepada satu titik, meninggalkan hanya border berwarna yang kelihatan sebagai segitiga.

Alat ini membina struktur itu untuk anda: pilih arah mana segitiga itu perlu menghala, sebesar mana ia sepatutnya, dan warna apa ia sepatutnya, kemudian tonton pratonton langsung dikemas kini dan salin CSS yang tepat. Helah asas yang sama digunakan di seluruh web untuk anak panah CSS sahaja, penunjuk tooltip dan caret dropdown.

Sumber: CSS Backgrounds and Borders Module Level 3, W3C — mentakrifkan bagaimana tepi border bersebelahan bertemu pada satu sudut, iaitu mekanisme yang menjadi asas teknik segitiga ini.

Kenapa guna alat ini?

Pratonton langsung memaparkan segitiga sebenar supaya anda boleh sahkan saiz, arah dan warna sebelum menyalin apa-apa.
Meliputi kesemua empat arah asas — atas, bawah, kiri, kanan — dengan satu kawalan.
Tiada fail imej atau SVG diperlukan — segitiga dibina begini hanya beberapa baris CSS.
Berguna untuk penunjuk tooltip, caret dropdown/accordion, bullet tersuai dan bentuk hiasan mudah.
Berjalan sepenuhnya dalam pelayar anda — apa yang anda laraskan tidak dimuat naik ke mana-mana.
Percuma, tiada pendaftaran, berfungsi di telefon.

Cara menggunakannya

Pilih arah — segitiga menghala atas, bawah, kiri atau kanan bergantung pada sisi mana yang dapat border pejal.
Tetapkan saiz — ini mengawal nilai border-width pada ketiga-tiga sisi dan menentukan seberapa besar segitiga kelihatan.
Pilih warna untuk border pejal (kelihatan), yang menjadi warna isian segitiga.
Salin CSS yang dijana dan gunakan pada elemen dengan width: 0 dan height: 0 — <div> kosong atau pseudo-elemen seperti ::before/::after kedua-duanya berfungsi baik.

Contoh

Input

Arah: bawah · Saiz: 60px · Warna: #ea580c

Hasil

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

Untuk segitiga menghala ke bawah, warna pejal diletakkan pada border-top manakala border kiri dan kanan kekal lutsinar — sisi bertentangan daripada arah segitiga itu menghala.

Kenapa lebar dan tinggi sifar penting

Helah ini hanya berfungsi kerana elemen itu tiada kotak kandungan sendiri — width: 0 dan height: 0 bermakna keseluruhan bentuk kelihatan datang semata-mata daripada border yang bertemu di titik tengah. Jika elemen itu mempunyai sebarang lebar atau tinggi, border tidak lagi meruncing kepada titik yang bersih dan bentuk itu rosak. Ini juga sebab teknik ini berfungsi sama baik pada <div> kosong atau pada pseudo-elemen ::before/::after dengan content: "" — tiada kandungan sebenar diperlukan, hanya kotak border itu.

Dokumentasi MDN mengenai sifat border CSS meliputi bagaimana border-width, border-style dan border-color bergabung, termasuk bagaimana border pada sisi bersebelahan bertemu pada pepenjuru (developer.mozilla.org/en-US/docs/Web/CSS/border) — fakta geometri yang menjadi asas keseluruhan teknik ini.

Kegunaan biasa segitiga CSS

Penunjuk tooltip dan gelembung ucapan: segitiga kecil (6–10px) diletakkan di tepi kotak bulat, diwarnakan sepadan dengan warna latar belakang kotak.
Caret dropdown dan select: segitiga kecil menghala bawah bersebelahan butang atau elemen select untuk menunjukkan ia membuka menu.
Penunjuk kembang/luas accordion: segitiga menghala kanan yang berputar menghala bawah apabila seksyen dikembangkan.
Bullet senarai tersuai: segitiga kecil menghala kanan menggantikan bullet lalai pelayar, untuk gaya senarai yang lebih tersendiri.
Sudut banner/reben ringkas: segitiga diselitkan di sudut kad untuk simulasikan kesan reben terlipat.

Menggabungkan dengan alat CSS lain

Segitiga yang digunakan sebagai penunjuk tooltip biasanya memerlukan bayang lembut yang sepadan supaya sejajar secara visual dengan kotak yang ia lekat — Box Shadow Generator menghasilkan bayang itu. Untuk bentuk UI yang melebihi segitiga (chevron, bintang, hexagon), clip-path umumnya pendekatan moden yang lebih baik berbanding menambah lebih banyak helah border.

→ Penjana CSS Box-Shadow · Penjana CSS Border-Radius

Soalan lazim

Kenapa warna diletakkan pada border bertentangan daripada arah segitiga menghala?

Bayangkan elemen itu sebagai bentuk berlian yang dibuat daripada empat segmen border segitiga bertemu di tengah. Jika warna pejal berada pada border atas, bentuk kelihatan menduduki separuh atas — tetapi kerana elemen itu bersaiz sifar, 'separuh atas' itu sebenarnya menghala ke bawah, ke arah di mana kotak kandungan elemen yang tidak wujud itu sepatutnya berada. Logik sama terpakai untuk kesemua empat arah.

Bolehkah saya buat segitiga yang bukan bentuk isoceles sempurna?

Ya — alat ini sentiasa menjana segitiga simetri untuk kesederhanaan, tetapi anda boleh edit CSS yang disalin secara manual selepas itu. Menjadikan dua border-width lutsinar tidak sama akan memiringkan segitiga ke satu sisi; menukar lebar border pejal secara berasingan mengubah tingginya tanpa menjejaskan lebar tapaknya.

Adakah teknik ini berfungsi dalam semua pelayar?

Ya — helah segitiga berasaskan border hanya bergantung pada sokongan asas border-width, border-style dan border-color, yang telah wujud sejak pelaksanaan CSS paling awal. Ia antara teknik bentuk CSS tulen yang paling luas serasi yang ada.

Bilakah saya patut guna clip-path dan bukannya helah border?

Helah border sesuai untuk segitiga mudah khususnya, kerana ia tidak memerlukan sebarang sifat tambahan dan berfungsi di mana-mana sahaja. Untuk apa-apa yang lebih kompleks — pentagon, bintang, anak panah dengan takuk, atau potongan pepenjuru pada kotak yang masih perlu tunjuk imej latar belakang — clip-path lebih fleksibel dan lebih mudah difahami, walaupun sokongan pelayar warisannya lebih sempit.

Bolehkah saya letak teks atau ikon di dalam segitiga?

Tidak secara langsung — kerana elemen segitiga itu berlebar dan bertinggi sifar, tiada kotak kandungan untuk menampung apa-apa. Untuk gabungkan segitiga dengan teks atau ikon, gunakan ia sebagai pseudo-elemen hiasan (::before/::after) pada elemen induk yang mengedudukkannya secara mutlak, kemudian gayakan kandungan sebenar induk itu secara berasingan.