纯 CSS 画火箭需分「箭头+箭身+尾焰」三层：用 clip-path polygon() 绘朝上等腰三角箭头，linear-gradient 加 border-radius 模拟圆柱箭身，::before 伪元素配 radial-gradient 和 transform 制作动态尾焰，全程响应式对齐。
纯 CSS 画火箭不是靠“堆砌 div”，而是用 border、clip-path 和伪元素分层控制形状，关键在于把火箭拆成「箭头 + 箭身 + 尾焰」三部分，用几何逻辑拼出来——否则容易变成一堆不可维护的 div 嵌套。
用 clip-path 画箭头：三角形要精准朝上
火箭最前端是等腰三角形箭头，clip-path: polygon() 最直接。别用 border 造三角（易受盒模型干扰），也别写死像素值——响应式下会错位。
-
clip-path: polygon(50% 0%, 0% 100%, 100% 100%)是标准朝上三角，顶点在顶部中点 - 如果父容器宽高不固定，把
50%换成calc(50% - 2px)微调可避免边缘锯齿 - Chrome 107+ 支持
path()语法，但 Safari 目前只认polygon()，稳妥起见别用
箭身用 linear-gradient + border-radius 模拟圆柱感
纯色矩形太呆板，加渐变和圆角才有体积感。别给整个元素设 background，而是用多层渐变模拟光效。
- 主色用
background: linear-gradient(180deg, #3a3a3a 0%, #1e1e1e 100%)模拟顶部暗、底部亮 - 加一层
box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3)强化底部阴影 -
border-radius: 8px 8px 0 0只圆顶部，保持底部平直——这是火箭和普通圆角矩形的区别点
尾焰必须用伪元素 + radial-gradient 动态扩散
静态尾焰像贴纸，真实感靠渐变中心偏移和透明度衰减。用 ::before 而非额外 HTML 标签，避免结构污染。
立即学习“前端免费学习笔记（深入）”；
-
content: ""+position: absolute定位在箭身底部中央 -
background: radial-gradient(circle at 50% 30%, #ff9500, #ff3b30, transparent 70%)——at 50% 30%把热源点往上偏，模拟火焰喷射方向 - 加
transform: scaleY(0.7) scaleX(1.2)拉宽压扁，更接近真实尾焰形态 - 动画只需改
opacity和transform: scale()，别动background-position，性能差
真正难的不是画出形状，而是让各部件在缩放、不同屏幕宽高比下仍对齐——clip-path 的百分比坐标、伪元素的 top: 100%、渐变的 at 位置，全得基于父容器尺寸动态计算。手写时建议先用 outline: 1px solid red 检查每层定位边界，再关掉。
