能，且是最轻量兼容方案：需宽高为0、三边transparent、仅留一边有色边框；浏览器在角交汇处自动形成45°斜边，收束成三角；方向由着色边决定，大小由对应border-width控制。
用 border 技巧画纯 CSS 三角形按钮
HTML 没有原生三角形按钮，但用 border 配合透明边框就能低成本实现。关键不是“画图形”，而是“控制四个边框的宽度和颜色，让其中三边透明、一边有色，视觉上挤出三角形”。
常见错误是直接给 div 设 width/height 再加 border，结果出来的是梯形或看不出形状——必须把宽高设为 0，只靠边框撑开。
- 向上箭头：底部边框设色，左右+顶部设透明且等宽
- 向右箭头：左边边框设色，上下+右边设透明且等宽
- 三角形大小由
border-width决定，比如border-bottom: 20px solid #333就生成底边 40px 宽的等腰三角形 - 若需点击区域更大，别用
padding（会变形），改用transform: scale()或外层包裹button元素
给三角形加点击交互和 hover 效果
纯 div + border 的三角形默认不可聚焦、无键盘支持、无障碍语义缺失。真要当按钮用，必须套一层 button，再用 ::after 伪元素画三角形。
这样既能保留 button 的原生行为（click、Enter 触发、disabled 状态、屏幕阅读器识别），又不污染 DOM 结构。
立即学习“前端免费学习笔记（深入）”；
button.triangle-btn {
position: relative;
padding: 8px 16px;
background: none;
border: none;
cursor: pointer;
}
button.triangle-btn::after {
content: "";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
border: 6px solid transparent;
border-left-color: currentColor;
}
-
border-left-color继承父级文字色，方便主题切换 -
transform: translateY(-50%)垂直居中，比top: 50%; margin-top: -6px更可靠 - hover 时直接改
border-left-color即可，无需重绘整个伪元素 - 禁用状态加
button.triangle-btn:disabled::after { border-left-color: #ccc; }
IE 和旧版 Safari 中 border 三角形失效怎么办
IE10 及以下不支持 transparent 边框与非透明边框混用；iOS 9.3 之前的 Safari 对 ::after 在 button 上的支持不稳定。这时候不能硬扛，得降级。
最稳妥的 fallback 是用 SVG 内联图标替代：<svg width="10" height="10"><path d="M0,0 L10,5 L0,10 Z" fill="currentColor"/></svg>。它体积小、可缩放、颜色随 currentColor 变，且兼容性拉满。
- 不要用 PNG，缩放糊、换色难、增加 HTTP 请求
- SVG 路径里的
d属性值固定，三角形朝向由path坐标决定，比如朝右就用M0,0 L10,5 L0,10 Z - 在现代浏览器里仍可用 CSS 三角形，用
@supports (border-color: transparent)包裹，避免覆盖 SVG
响应式场景下三角形按钮变形怎么处理
用 border 实现的三角形，其尺寸是绝对像素值，缩放时不会自动适配字体大小或容器。如果按钮文字用 rem 或 em，三角形却还是 6px 固定，就会比例失调。
解决办法是把边框宽度也换成相对单位，但注意：CSS 不允许 border-width 用 em 直接写（部分浏览器不认），所以得用 calc() 或 CSS 自定义属性动态计算。
- 推荐方案：定义
--triangle-size: 0.375em，然后border-left-width: var(--triangle-size) - 更安全的做法是用
clip-path配合width/height，比如clip-path: polygon(0 0, 100% 50%, 0 100%)，但 IE 完全不支持 - 移动端触摸热区至少 44×44px，三角形本身可能很小，务必确保父级
button的padding足够，而不是只靠三角形区域响应点击
