能画，但“复杂”有明确边界：非自交多边形（三角形、梯形、六边形、箭头、对话气泡）可稳定实现；星形、镂空、曲线、动态缩放图形则必须叠加伪元素或换用 clip-path: polygon()。
能画，但“复杂”有明确边界：非自交多边形（三角形、梯形、六边形、箭头、对话气泡）可稳定实现；星形、镂空、曲线、动态缩放图形则必须叠加伪元素或换用 clip-path: polygon()。
为什么 border 技巧是三角形/箭头的底层逻辑
核心是把元素宽高设为 0，再用不同方向的透明边框“挤出”实色区域。浏览器渲染时，border 交汇处自动形成斜角——这不是画出来的，是边框盒模型的自然结果。
- 向上三角形：只设
border-bottom，左右边框用transparent - 右上箭头：设
border-top和border-left，其余为transparent - 错误现象：IE6 不支持
transparent，可用border-style: dotted替代（但仅限旧项目） - 注意点：
border-width值直接决定三角形大小，且三边比例固定，不能单独拉伸某一边
六边形这类多边形必须靠 ::before + ::after 叠加
单个伪元素无法生成六边形，因为 border 技巧最多输出四边形或三角形。标准解法是用主元素 + ::before + ::after 三层定位，各自旋转、裁剪、偏移后视觉合并。
- 典型结构：主元素设
width/height和background，::before旋转-30deg，::after旋转30deg - 关键参数：所有层必须统一
box-sizing: border-box，否则尺寸错位；transform-origin通常设为center - 兼容性坑：
clip-path: polygon()虽更直观，但在 Safari 15.4 之前不支持百分比坐标，iOS 16.4 才修复部分渲染抖动 - 响应式失效常见原因：没配合
aspect-ratio或容器查询，导致旋转后六边形被父容器挤压变形
心形、对话气泡等“伪曲线”图形依赖 transform + border-radius 组合
心形本质是两个圆角矩形旋转拼接，对话气泡则是主框 + 一个带 border-radius 的三角形伪元素定位在角落——它们没有真正贝塞尔曲线，但人眼难以分辨。
- 心形：用
::before和::after各画一个半圆矩形，rotate(-45deg)后重叠，top: 0; left: 50px控制位置 - 对话气泡箭头：伪元素用
border画三角，再通过top/right精确定位到气泡边缘，margin微调对齐 - 容易踩的坑：iOS Safari 对
transform: rotate()+border-radius混合渲染有锯齿，加backface-visibility: hidden可缓解 - 性能提示：大量使用
transform旋转伪元素不会触发布局重排，但频繁动画仍建议开启will-change: transform
真正卡住人的不是怎么画，而是怎么让图形在不同屏幕、不同缩放、不同字体设置下保持比例和对齐。border 技巧数值全是像素硬编码，clip-path 坐标依赖容器尺寸——这些细节一旦漏掉，图形就在某个 iOS 版本上突然错位或消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
