HTML中怎么制作带箭头的按钮？伪元素画箭头技巧-html教程-PHP中文网

箭头飘到页面左上角是因为::after用position: absolute时会寻找最近已定位祖先，若按钮未设position: relative，则以body为基准定位；必须给按钮自身加position: relative才能确保箭头相对于按钮精确定位。

html中怎么制作带箭头的按钮？伪元素画箭头技巧

直接用 ::after 伪元素 + border 就能做出紧贴按钮边缘、不额外加 HTML 的箭头，但漏掉 position: relative 或边框写法不对，箭头八成飘到页面左上角。

为什么箭头总飘到页面左上角？

这不是 bug，是 CSS 定位规则本身决定的：::after 用 position: absolute 时，会找“最近已定位祖先”。如果按钮没设 position: relative，它就一路往上跳，最后以为基准偏移。

必须给按钮本身（比如 <button class="btn"></button>）加 position: relative
别只给内部文字或 <span></span> 加——那不是定位上下文的根
如果按钮嵌在 display: flex 的父容器里，而该父容器恰好有 position: relative，箭头就以它为锚点，得确认这是否符合预期

向下箭头怎么写才不歪？

向下箭头贴按钮底边，靠 border-top 色块+三边透明形成三角，但尺寸和偏移稍有偏差就会露缝或错位。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

伪元素必须设 width: 0; height: 0;，否则交点被撑开，三角变钝
向下箭头写法：border-top: 8px solid #333; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid transparent;（漏掉任意一条，部分安卓 WebView 会整块忽略渲染）
定位用 bottom: -8px; left: 50%; transform: translateX(-50%); ——bottom 值略小于 border-width（如 8px → -7px），否则出现 1px 缝隙
若按钮有 border-radius，尖端可能顶出圆角，可微调 bottom: -7.5px 或加 margin-bottom: -1px

向右箭头放在按钮右侧怎么居中？

向右箭头贴按钮右边，靠 border-left 色块形成，但水平方向没有天然居中基准，必须靠 transform 对齐尖端。

写法：border-left: 8px solid #333; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
定位用 right: 12px; top: 50%; transform: translateY(-50%);（right 值要预留按钮内边距空间）
避免混用 top 和 transform: translateY()，某些旧版 Safari 会触发亚像素模糊
IE11 及以下不支持伪元素上的 transform，降级方案是 top: calc(50% - 8px)，但前提是边框宽度固定且已知