Penjana Segi Tiga CSS

Cipta segi tiga CSS tulen menggunakan helah border klasik — tiada SVG, tiada imej. Pilih satu daripada lapan arah, tetapkan lebar dan tinggi dalam piksel, pilih warna, dan salin peraturan .triangle { width: 0; height: 0; ... } yang berdiri sendiri yang memaparkan bentuk itu sepenuhnya daripada border lutsinar dan berwarna.

1. Klik butang Arah (atas, bawah, kiri, kanan, atau salah satu daripada empat penjuru: kiri-atas, kanan-atas, kiri-bawah, kanan-bawah). 2. Pilih Warna segi tiga dengan pemilih warna. 3. Seret peluncur Lebar (10–200px) dan Tinggi (10–200px). 4. Salin CSS yang dijana daripada panel kod.

atas / bawah / kiri / kanan menghasilkan segi tiga sama kaki yang menghala ke arah itu, dibina daripada dua border lutsinar yang sama dan satu border berwarna. kiri-atas, kanan-atas, kiri-bawah, kanan-bawah menghasilkan segi tiga penjuru bersudut tegak menggunakan satu border berwarna dan satu border lutsinar. Output sentiasa menetapkan width: 0 dan height: 0 pada kelas .triangle.