Softonic

Generator Segitiga CSS

Langkah 1 / 2
Berikutnya

Segitiga CSS klasik sebenarnya sama sekali bukan segitiga, melainkan elemen berlebar nol dan tinggi nol dengan tiga border transparan serta satu border berwarna yang bertemu tepat di satu titik. Generator ini menghasilkan deklarasi tersebut untuk Anda dalam empat arah (atas, bawah, kiri, kanan), dengan ukuran sesuai nilai piksel yang Anda pilih dan diisi dengan warna yang Anda tentukan. Sangat cocok untuk panah tooltip, gelembung percakapan, dan pemisah breadcrumb.

Cara Membuat Segitiga dari Border

  1. 1

    Pilih arah

    Atas, bawah, kiri, atau kanan. Arah menentukan border mana yang mendapat warna dan tiga border mana yang tetap transparan.

  2. 2

    Atur ukuran

    Nilai ukuran digunakan untuk semua lebar border. Segitiga berukuran 60px akan memiliki lebar 120px (atau tinggi 120px, tergantung arahnya).

  3. 3

    Pilih warna isian

    Masukan warna hanya mendukung nilai hex (misalnya `#10b981`); warna rgb, rgba, atau warna bernama tidak didukung. Warna hanya diterapkan pada border di sisi yang berlawanan.

  4. 4

    Salin aturan CSS

    Hasilnya adalah kumpulan aturan `.triangle { ... }` yang lengkap; masukkan saja ke dalam stylesheet Anda dan tambahkan `<div class="triangle"></div>` di tempat yang diperlukan.

Mengapa trik border ini berhasil

Ketika sebuah kotak memiliki width: 0 dan height: 0, keempat bordernya bertemu di satu titik pusat. Karena border bertemu pada sudut 45 derajat, setiap border pada dasarnya sudah berupa segitiga, hanya tiga di antaranya yang tidak terlihat. Beri warna pada satu border, dan Anda akan melihat segitiga itu.

Peta Arah

Arah Border terlihat Border transparan
Atas border-bottom border-left, border-right, border-top
Bawah border-top border-left, border-right, border-bottom
Kiri border-right border-top, border-bottom, border-left
Kanan border-left border-top, border-bottom, border-right

Perhitungan Ukuran

Ketiga border transparan berbagi nilai ukuran yang sama; border yang terlihat juga menggunakan ukuran yang sama. Jadi, segitiga dengan size: 60:

  • Lebar = 2 × 60 = 120px untuk segitiga atas/bawah
  • Tinggi = 2 × 60 = 120px untuk segitiga kiri/kanan

Jika Anda memerlukan segitiga asimetris (alas lebih sempit, puncak lebih tinggi), beri border transparan satu ukuran dan border yang terlihat ukuran berbeda; misalnya border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red; menghasilkan segitiga ke atas yang tinggi dan sempit.

Kapan sebaiknya menggunakan SVG

  • Anda memerlukan beberapa titik sudut, bukan tiga, gunakan <polygon>.
  • Segitiga harus dapat berskala secara mulus mengikuti elemen induk, gunakan viewBox dan preserveAspectRatio.
  • Anda membutuhkan isian gradien, garis tepi (stroke), atau ujung membulat, border CSS tidak dapat melakukan satu pun di antaranya.

Pertanyaan yang Sering Diajukan

Tidak bisa hanya dengan border, lebar border tidak menerima % atau vw dengan cara yang didukung dengan baik. Jika Anda memerlukan penskalaan yang mulus, beralihlah ke SVG <polygon> atau gunakan clip-path: polygon(...) pada elemen biasa.

Anda tidak dapat membulatkan sudut tempat border-border tersebut bertemu. Gunakan SVG dengan path bergaris tepi (stroke) dan stroke-linejoin: round, atau clip-path: polygon(...) yang dipadukan dengan sedikit filter: drop-shadow untuk menyamarkan tepinya.

Ya, itulah kasus penggunaan yang paling umum. Posisikan segitiga secara absolute di tepi tooltip dan sesuaikan warna isian dengan warna latar tooltip agar tampak seperti satu gelembung utuh.

Ya. Arah, ukuran, dan warna yang Anda pilih dikirim ke server kami bersama permintaan halaman agar server dapat membuat CSS-nya. Dalam alur langkah demi langkah, nilai-nilai tersebut juga dibawa dalam tautan halaman. Nilai-nilai itu tidak disimpan.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Generator Warna Acak

Buat 1 hingga 50 warna HEX acak dengan contoh warna yang bisa dipratinjau, disalin, dan dipakai di CSS, pengujian, atau eksplorasi palet.

Penghitung FPS

Ukur FPS browser dengan requestAnimationFrame: penghalusan, frame rate minimum dan maksimum, ambang peringatan, dan grafik opsional. Berjalan lokal, tanpa unggahan dan tanpa API.

Pemilih Warna HEX

Pilih atau masukkan warna HEX untuk mendapatkan RGB, HSL, perkiraan CMYK, luminans relatif, serta kontras terhadap putih dan hitam.

Alat ini tersedia dalam bahasa lain