当前位置：首页 > news >正文

不同方向的箭头符号

news 2026/3/26 18:41:05

1. 基础方向箭头

▶ 右箭头 (U+25B6)
◀ 左箭头 (U+25C0)
▼ 下箭头 (U+25BC)
▲ 上箭头 (U+25B2)

2. 实心箭头

🔺 实心上三角 (U+1F53A)
🔻 实心下三角 (U+1F53B)
⏩ 快进右箭头 (U+23E9)
⏪ 快退左箭头 (U+23EA)

3. 细线箭头

▸ 小右箭头 (U+25B8)
▾ 小下箭头 (U+25BE)
▴ 小上箭头 (U+25B4)
◂ 小左箭头 (U+25C2)

4. 双线箭头

» 右双箭头 (U+00BB)
« 左双箭头 (U+00AB)
➡ 右箭头 (U+27A1)
⬅ 左箭头 (U+2B05)
⬆ 上箭头 (U+2B06)
⬇ 下箭头 (U+2B07)

5. 其他风格箭头

↘ 右下箭头 (U+2198)
↙ 左下箭头 (U+2199)
↗ 右上箭头 (U+2197)
↖ 左上箭头 (U+2196)
→ 右箭头 (U+2192)
← 左箭头 (U+2190)
↑ 上箭头 (U+2191)
↓ 下箭头 (U+2193)

6. HTML示例代码

<!DOCTYPE html>
<html>
<head>
<style>
.arrow-container {font-family: Arial, sans-serif;line-height: 2;padding: 20px;
}.arrow-group {margin: 10px 0;padding: 10px;border: 1px solid #ddd;border-radius: 5px;
}.code {background: #f5f5f5;padding: 2px 6px;border-radius: 3px;font-family: monospace;
}
</style>
</head>
<body><div class="arrow-container"><div class="arrow-group"><h3>基础方向箭头</h3><div>▶ 右箭头 <span class="code">U+25B6</span></div><div>◀ 左箭头 <span class="code">U+25C0</span></div><div>▼ 下箭头 <span class="code">U+25BC</span></div><div>▲ 上箭头 <span class="code">U+25B2</span></div></div><div class="arrow-group"><h3>细线箭头</h3><div>▸ 小右箭头 <span class="code">U+25B8</span></div><div>▾ 小下箭头 <span class="code">U+25BE</span></div><div>▴ 小上箭头 <span class="code">U+25B4</span></div><div>◂ 小左箭头 <span class="code">U+25C2</span></div></div><div class="arrow-group"><h3>线条箭头</h3><div>→ 右箭头 <span class="code">U+2192</span></div><div>← 左箭头 <span class="code">U+2190</span></div><div>↑ 上箭头 <span class="code">U+2191</span></div><div>↓ 下箭头 <span class="code">U+2193</span></div></div><div class="arrow-group"><h3>斜角箭头</h3><div>↘ 右下箭头 <span class="code">U+2198</span></div><div>↙ 左下箭头 <span class="code">U+2199</span></div><div>↗ 右上箭头 <span class="code">U+2197</span></div><div>↖ 左上箭头 <span class="code">U+2196</span></div></div>
</div></body>
</html>

7. 在details组件中使用

<style>
details {margin: 10px 0;
}details summary {list-style: none;cursor: pointer;padding: 10px;border: 1px solid #ddd;border-radius: 4px;
}details summary::-webkit-details-marker {display: none;
}/* 使用 ▶ 和 ▼ */
details summary::before {content: '▶';margin-right: 8px;display: inline-block;transition: transform 0.3s ease;font-size: 12px;
}details[open] summary::before {content: '▼';
}/* 或者使用 → 和 ↓ */
.arrow-line summary::before {content: '→';
}.arrow-line[open] summary::before {content: '↓';
}
</style><details><summary>点击展开内容 (三角箭头)</summary><p>这里是展开的详细内容...</p>
</details><details class="arrow-line"><summary>点击展开内容 (线条箭头)</summary><p>这里是展开的详细内容...</p>
</details>

最常用的展开箭头组合：