clip-path 是最轻量的纯 css 画三角形警告图标方案，关键在于对齐与复用：用 polygon 定义方向，配合 relative 定位、transform 居中、css 变量控制颜色，装饰性图标需 aria-hidden="true"，状态用 data-status 控制，dialog 要确保挂载 dom、用户手势上下文、唯一 id、关闭后 remove() 彻底清理。
怎么用纯 CSS 画一个三角形警告图标
不用图片、不依赖字体图标，clip-path 是最轻量的方案。关键不是“怎么画”，而是“怎么对齐 + 怎么复用”。
-
clip-path: polygon(50% 0%, 100% 100%, 0% 100%)生成等腰三角形，但默认朝下；要朝上就交换 Y 值顺序（如polygon(0% 0%, 100% 0%, 50% 100%)） - 必须设
position: relative才能让内部::before的绝对定位生效 - 感叹号文字垂直居中靠
top: -4px+transform: translateX(-50%)，数值要配合字体大小微调，18px 宽高下-4px是经验值 - 背景色别硬写
#e6a23c，建议抽成 CSS 变量，比如--warn-color: #e6a23c，方便主题切换
按钮里塞警告图标，DOM 结构怎么组织才不踩坑
图标是装饰性内容，不能语义污染按钮本身。常见错误是把 <span class="warning-icon"></span> 直接塞进 <button></button> 内部却不加 aria-hidden="true"，导致读屏软件重复播报“警告 按钮文字 警告”。
- 图标容器必须加
aria-hidden="true"，否则会被 AT（辅助技术）当作独立可聚焦元素 - 按钮文本本身要完整表达意图，比如“提交（⚠️必填字段未填）”比“提交”+图标更可靠
- 如果图标状态会变（如“警告”/“错误”/“成功”），别靠 class 切换颜色——要用
data-status="warn"控制，方便 JS 动态判断和 CSS 响应 - 移动端点击区域至少 44×44px，图标旁留足
margin-right，别让文字贴太近
点击按钮后弹警告提示，为什么 showModal() 报错
报错 Failed to execute 'showModal' on 'HTMLDialogElement' 几乎全是时机问题，不是语法错。
- 元素没挂到 DOM 就调
.showModal()：确保<dialog></dialog>已插入文档，比如用document.body.appendChild(dialog)显式追加 - 不在用户手势上下文（如 fetch 回调里直接调）：加一层
setTimeout(() => dialog.showModal(), 0)或用element.addEventListener('click', ...)绑定在按钮上 - 同一页面多个
<dialog></dialog>共用 ID 导致 getElementById 返回 null：每个 dialog 必须有唯一 id，且 JS 获取时核对是否匹配 - 没配关闭逻辑：必须提供带
onclick="this.closest('dialog').close()"的按钮，否则用户无法退出，且会卡焦点
警告提示消失后，DOM 真的干净了吗
很多团队只做 dialog.close() 或 element.style.display = 'none'，但残留 DOM 会持续影响焦点流、读屏播报和内存占用。
-
<dialog></dialog>关闭后建议调dialog.remove()，而不是隐藏——除非你明确需要复用其内容 - 用
role="alert"横幅时，关闭后必须element.remove()，不能只删 class 或设display: none；否则仍被 ARIA live 区域捕获并重复播报 - Vue/React 中若用 v-if / useState 控制显示，要确认组件卸载时触发了 cleanup effect，尤其注意定时器、事件监听器是否清除
- 真正难的不是“弹出来”，是“彻底清掉”——线上偶发的焦点丢失、读屏重复读、内存泄漏，八成出在这一步
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
