button元素拼三角形等图形是利用盒模型和边框技巧的hack方案，仅支持矩形、直角梯形、等腰三角形，无法实现圆弧、贝塞尔曲线或镂空，适合极简线性图标；需重置默认样式、处理对齐与缩放问题，复杂需求应改用SVG。
用 button 元素代替 svg 画三角形？别硬扛，先看限制
纯 CSS 手绘几何图形时，用 button 拼 icon 是可行的，但不是万能解法。它本质是“利用按钮的盒模型 + 边框技巧 + 伪元素堆叠”，而非真正绘制矢量路径。这意味着：所有图形必须由矩形、直角梯形、等腰三角形（靠 border 技巧）构成，且无法实现圆弧、贝塞尔曲线或镂空。常见失败场景包括：想画五角星、带圆角的菱形、或内部挖空的环形——这些立刻会卡在 border-collapse 或 overflow:hidden 的边界上。
- 适合场景：极简线性 icon（如播放三角 ▶、暂停双竖条 ▐▐、菜单三横 ≡）、像素风小图标（用多个
button网格拼 8×8 像素图） - 关键约束：
button默认有 user agent 样式（padding、border、font），必须重置：border:0; padding:0; font-size:0; line-height:0; - 性能注意：每个
button是独立可聚焦元素，10+ 个拼成的 icon 会破坏语义和键盘导航，建议加tabindex="-1"并用aria-hidden="true"
border 画三角形时，为什么总缺一边？
用 border 生成三角形的核心是：把三边设为透明，留一边有色，并把宽高设为 0。错误常出在漏掉 border-color 的透明声明或方向写反。比如想画向下的三角：
button {
width: 0; height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333; /* 这里才是“底边”，实际朝下 */
}容易踩的坑：
-
border-bottom画的是向上三角，border-top反而是向下 —— 因为 border 是从盒模型边缘向外延伸，方向以“被着色的 border 边”为准 - 如果父容器设置了
overflow: hidden，而三角形超出父盒（例如用transform: translateY()微调位置），会被裁剪，此时改用position: relative+top/left更安全 - IE 下
border三角可能渲染模糊，需加transform: translateZ(0)强制 GPU 渲染
多个 button 拼菱形/平行四边形，如何对齐不偏移？
用四个 button 拼菱形（上下左右各一个三角），难点不在形状，而在基线对齐。默认情况下，button 是 inline-level 元素，受 vertical-align 影响，哪怕设了 display: inline-block，也会因默认 vertical-align: baseline 导致错位。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 统一方案：给所有拼图
vertical-align: middle，并确保父容器font-size: 0（消除 inline 元素间空白符占位） - 更稳做法：父容器设
display: flex; align-items: center; justify-content: center;，子button设flex: none，避免弹性布局干扰尺寸 - 平行四边形不能只靠
skewX()—— 它会拉伸文字（虽然你设了font-size:0，但某些浏览器仍会触发重排），正确方式是用transform: skewX(-20deg) translateX(5px)补偿水平偏移
响应式缩放时，border 三角为啥变糊或比例崩了？
border 三角的尺寸完全依赖像素值，无法像 SVG 那样用 viewBox 自适应。当用 vw 或 % 缩放整个容器时，border 宽度不会同比例缩放，导致图形失真。
- 解决方法一：用
transform: scale(0.5)替代直接改宽高，但要注意transform不影响文档流，需手动调整margin补偿空间 - 解决方法二：CSS 自定义属性 +
calc()动态算 border 宽度，例如：--size: 10px; border-top: calc(var(--size) * 1) solid #000;，再配合媒体查询改--size - 终极提醒：一旦需要多尺寸适配或动画，立刻放弃
button+border方案，改用内联svg—— 它体积小、缩放无损、支持currentColor动态换色，比 hack 更省心
真正难的不是怎么画，而是判断什么时候该停手：当你要加阴影、渐变填充、或 hover 时旋转 45° 同时保持尖角锐利，button 就已经越过可用边界了。
