Generator Segitiga CSS
Buat segitiga murni CSS yang menunjuk ke salah satu dari 8 arah — trik border ukuran-nol klasik atau clip-path polygon modern — dengan lebar, tinggi, dan warna Anda sendiri, ditambah cuplikan HTML dan pratinjau SVG. Berjalan sepenuhnya di browser Anda.
Input
Kemana segitiga menunjuk — empat arah kardinal, atau wedge sudut siku-siku.
Border bekerja di mana-mana tetapi tidak meninggalkan kotak konten; clip-path menyimpan kotak nyata tempat Anda dapat menempatkan gradien.
Digunakan untuk aturan yang dihasilkan dan snippet HTML.
Output
Segitiga Anda akan muncul di sini.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-triangle-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"direction": "up",
"technique": "border",
"width": "100",
"height": "100",
"color": "#464aff",
"className": "triangle"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-triangle-generator` tool (CSS Triangle Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-triangle-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Generator Segitiga CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Segitiga adalah salah satu bentuk yang CSS tidak memiliki primitif untuk. Tidak ada shape: triangle, jadi Anda membuat bohongan — baik dengan menyalahgunakan cara perbatasan bertemu di sudut, atau dengan memotong persegi panjang menjadi tiga poin. Generator ini menulis keduanya untuk Anda: pilih arah, atur lebar, tinggi dan warna, dan salin aturan yang selesai.
Cara menggunakannya
- Pilih arah yang ditunjuk oleh segitiga — atas, bawah, kiri, kanan, atau salah satu dari empat wedge sudut siku-siku (atas-kiri, atas-kanan, bawah-kanan, bawah-kiri).
- Pilih teknik: trick border atau polygon
clip-path(lihat di bawah untuk memilih mana). - Seret lebar dan tinggi sampai pratinjau terlihat benar. Setiap arah dapat diubah ukurannya sepenuhnya, sudut disertakan.
- Atur warna dan, jika Anda suka, nama kelas — ini digunakan dalam aturan CSS dan snippet HTML.
- Salin CSS dan snippet
<div>, atau unduh pratinjau SVG jika Anda lebih suka mengirim gambar.
Border trick atau clip-path?
The border trick memberikan elemen width: 0; height: 0 dan border yang tebal. Karena perbatasan yang berdekatan bertemu di sepanjang diagonal, masing-masing dari empat wilayah perbatasan itu sendiri adalah segitiga — beri warna pada satu, buat yang lain tiga transparent, dan hasilnya yang terlihat adalah segitiga. Ini bekerja di setiap browser yang pernah dikirim, termasuk klien email, itulah sebabnya masih menjadi default.
Biayanya adalah bahwa tidak ada kotak konten yang tersisa. Anda tidak dapat menempatkan teks atau ikon di dalam elemen, Anda tidak dapat memberikan segitiga gradien atau gambar latar belakang, dan Anda tidak dapat menganimasikan bentuknya — hanya lebar perbatasannya.
clip-path: polygon() menyimpan kotak width × height nyata dengan background nyata, kemudian memotong semuanya di luar tiga poin. Itu berarti segitiga dapat membawa gradien, gambar latar belakang, atau bayangan kotak (via filter: drop-shadow()), dan polygon itu sendiri dapat ditransisikan. Dukungan universal di browser modern tetapi tidak ada di mesin warisan dan tidak dapat diandalkan di email.
Aturan praktis: clip-path untuk apa pun di situs modern, trick border untuk jangkauan maksimal atau untuk panah dekoratif kecil di mana tidak ada batasan yang penting.
Apa arti angka-angka itu
Untuk segitiga kardinal, lebar adalah panjang alas dan tinggi adalah jarak dari alas ke puncak. Dalam aturan border yang dihasilkan, itu muncul sebagai dua setengah lebar di sisi (segitiga naik 100px lebar mendapat 0 50px 100px 50px).
Untuk wedge sudut, lebar dan tinggi adalah dua kaki sudut siku-siku, dan mereka memetakan langsung ke dua lebar perbatasan — tidak ada setengahan. Itulah juga mengapa wedge sudut dapat diubah ukurannya di sini meskipun beberapa generator menguncinya ke persegi.
Apakah itu berjalan di mesin saya?
Ya. Aturan, snippet HTML, dan pratinjau SVG semuanya dibangun di browser Anda — tidak ada yang diunggah, dan alat ini berfungsi offline setelah halaman dimuat.
Dapatkah saya menggunakan ini untuk tooltip atau dropdown arrow?
Itu adalah penggunaan klasik. Hasilkan segitiga turun kecil (katakan 12 × 6), kemudian posisikan dengan position: absolute terhadap tubuh tooltip. Gunakan teknik border di sini — panah bersifat dekoratif, jadi kotak konten yang hilang tidak merugikan Anda, dan Anda mendapatkan dukungan di mana-mana.
Bagaimana jika saya membutuhkan bentuk yang berbeda?
Untuk apa pun dengan lebih dari tiga poin — hexagon, bintang, panah, gelembung ucapan — gunakan CSS Clip-Path Generator, yang membangun polygon arbitrer dan bentuk klip lainnya. Untuk mengubah sudut kotak normal, lihat Border Radius Generator; untuk memutar atau memiringkan segitiga setelah Anda memilikinya, CSS Transform Generator menulis nilai transform yang cocok.