最稳、最可控的菱形实现是用 transform: rotate(45deg) 旋转正方形，需确保宽高相等、设置 transform-origin（默认居中）、配合 overflow: hidden 和 margin: auto 居中；border 法兼容老浏览器但难对齐、不支持圆角/渐变；clip-path 精准但 Safari 旧版兼容性差。
直接用 transform: rotate(45deg) 是最稳、最可控的方案，别被“border 技巧”带偏——它本质是拼两个三角形，容易错位、难对齐、不支持圆角和渐变填充。
用 transform 旋转正方形是最推荐的菱形实现
核心就是：一个宽高相等的 <div>，加 transform: rotate(45deg)，再用 transform-origin 控制旋转中心（默认是中心点，通常不用改）。
常见错误现象：rotate 后元素“跑出视口”或位置飘移，其实是没处理好外边距或父容器 overflow；还有人忘记设 width/height 相等，结果转出来是平行四边形。
- 必须确保原始元素是正方形（
width === height），否则旋转后不是标准菱形 - 若需居中显示，用
margin: auto+display: block，别依赖text-align: center - 想加边框？直接在旋转前的正方形上设
border，别在伪元素里描边 - 要圆角？用
border-radius（如12px），旋转后依然生效——这是 border 法做不到的
border 法画菱形只适合特定兼容场景
它靠两个叠在一起的透明边框三角形（:before 和 :after）拼成，原理是利用 border 的斜角交点。IE8+ 能跑，但现代项目基本没必要用。
立即学习“前端免费学习笔记（深入）”；
使用场景：需要支持极老浏览器（如 IE9 及以下）、且菱形只是纯色小装饰（比如列表项前的标记）。
容易踩的坑：top/left 偏移值必须精确匹配边框宽度，稍有偏差就露白缝；不能设 background，否则会盖住三角形；更没法加 box-shadow 或线性渐变。
- 典型写法是主元素
width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #3498db;，再用:after补上顶三角 - 所有方向的
border必须用transparent，只留一个有色边，否则形状失控 - 尺寸缩放困难：改大小得同步调四个方向的
border-width和伪元素偏移，维护成本高
clip-path 是未来可选但要注意兼容性
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) 能精准裁出菱形轮廓，不依赖旋转、不改变文档流，还能配合动画做形状过渡。
但它在 Safari 旧版本（
- 坐标单位用百分比最安全，适配响应式
- 不要混用
transform和clip-path做同一元素的形变，渲染行为可能不可预测 -
clip-path无法单独设置边框，得靠outline或额外包裹一层来模拟
真正难的不是“怎么画出菱形”，而是“怎么让它在不同缩放、文字环绕、flex/grid 布局里保持稳定”。旋转法胜在语义清晰、调试直观；border 法像黑盒，改一行可能全崩；clip-path 看似优雅，但上线前务必在真机上测三遍 viewport 缩放。别为了“炫技”牺牲可维护性。
