直接用 rotate() 做菱形容易错位，因为默认以左上角为旋转原点，需显式设 transform-origin: center；父容器须为等宽高等尺寸的正方形并加 overflow: hidden，配合 45deg 旋转才能实现全对称菱形。
为什么直接用 rotate() 做菱形容易错位？
因为 transform: rotate(45deg) 默认以元素左上角为原点旋转，不是中心点。容器没设 transform-origin: center，内容会偏出可视区，尤其配合 overflow: hidden 时，切掉的不是预期边缘，而是整个布局的“一角”。
常见错误现象：div 旋转后只显示右下四分之一，或文字被裁得只剩半截。
- 必须显式设置
transform-origin: center，否则旋转中心是默认的50% 50%—— 但这个“50%”是相对于元素自身宽高，不是父容器 - 父容器需有明确宽高（不能靠内容撑开），否则
overflow: hidden失效或裁剪范围不可控 - 子元素若用百分比定位（如
top: 50%），要记得它基于父容器原始坐标系，不是旋转后的视觉坐标系
全对称菱形的关键：父容器尺寸与旋转角度绑定
所谓“全对称”，是指菱形四边等长、对角线垂直平分，且上下左右留白一致。这要求父容器宽高相等（正方形），再旋转 45°，才能让顶点刚好落在容器四边中点。
例如：想让菱形外接圆直径为 200px，则父容器必须是 width: 200px; height: 200px;，再用 transform: rotate(45deg)，此时菱形顶点分别落在容器上/右/下/左四边中点。
立即学习“前端免费学习笔记（深入）”；
- 若父容器宽高不等（如
200px × 100px），旋转后得到的是斜向拉伸的平行四边形，不是菱形 - 旋转角度严格用
45deg；用30deg或60deg会破坏对称性，顶点不再居中 -
overflow: hidden必须加在父容器上，不是旋转元素本身——否则裁剪区域随旋转一起转了，失去意义
实际写法：两层嵌套 + 精确尺寸控制
推荐结构：外层容器（负责裁剪和定位）→ 中间旋转层（负责角度）→ 内容层（负责填充）。这样各司其职，避免样式耦合。
.diamond-outer {
width: 200px;
height: 200px;
overflow: hidden;
margin: 20px auto;
}
.diamond-inner {
width: 200px;
height: 200px;
transform: rotate(45deg);
transform-origin: center;
}
.diamond-content {
width: 100%;
height: 100%;
background: #4a90e2;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
注意：.diamond-inner 的宽高必须和外层一致，否则旋转后无法填满裁剪区；如果内容本身有内边距或字体大小浮动，需额外用 box-sizing: border-box 控制。
兼容性与性能陷阱
transform 和 overflow: hidden 在现代浏览器中没问题，但在 iOS Safari 旧版本（overflow: hidden 对 transform 元素的裁剪可能失效——内容会溢出到父容器外。
- 临时解法：给外层加
backface-visibility: hidden或will-change: transform，触发硬件加速并修复裁剪 - 更稳方案：不用
overflow: hidden，改用clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)，语义更准确，兼容性也更好（iOS 12.2+ 支持） - 别在大量列表项里无脑套这个结构——每个
transform都触发重绘，滚动卡顿明显
真正难的不是写出来，是想清楚“对称”到底指什么：是视觉对称？DOM 结构对称？还是响应式下仍保持比例？这些都会影响你是否该用 rotate，还是直接用 clip-path 或 SVG。
