纯CSS手绘几何图形：如何用HTML按钮拼凑创意icon？-html教程-PHP中文网

button元素拼三角形等图形是利用盒模型和边框技巧的hack方案，仅支持矩形、直角梯形、等腰三角形，无法实现圆弧、贝塞尔曲线或镂空，适合极简线性图标；需重置默认样式、处理对齐与缩放问题，复杂需求应改用svg。

纯css手绘几何图形：如何用html按钮拼凑创意icon？

用 `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; /* 这里才是“底边”，实际朝下 */
}

容易踩的坑：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

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 导致错位。

统一方案：给所有拼图 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 更省心