仅靠 css border 无法画出标准菱形，因其本质是直角三角形拼合；可靠方案是用等宽高等的元素配合 transform: rotate(45deg) 或 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)。
用 CSS border 画三角形时，怎么改成菱形
单靠 border 无法直接画出标准菱形——因为 border 三角形本质是「直角三角形拼合」，而菱形四边等长、对角线垂直平分，必须引入额外变换。
常见错误是试图调大某两个方向的 border-width 来“撑开”，结果得到的是梯形或不闭合的缺口形状。
- 真正可行的做法：先用
border画一个正方形（比如 0 宽度 border + padding 或宽高相等的块），再用transform: rotate(45deg) - 或者更轻量：用一个
width/height相等的<div>，设 <code>background-color，然后旋转 - 注意：旋转后元素仍占原位置的矩形空间，若需精确布局，得配合
transform-origin或外层容器overflow: hidden
纯 CSS 实现菱形的最小可靠写法
不用伪元素、不依赖字体图标、兼容所有现代浏览器的写法：
.diamond {
width: 20px;
height: 20px;
background: #000;
transform: rotate(45deg);
}
关键点：
立即学习“前端免费学习笔记（深入）”；
-
width和height必须严格相等，否则转出来是平行四边形 - 旋转角度固定为
45deg，不是30deg或60deg—— 这是正方形对角线与边的夹角 - 如果父容器有
line-height或vertical-align，可能造成上下偏移，建议加display: inline-block或重置vertical-align: top
用 clip-path 绘制菱形的适用场景
当需要响应式菱形（比如随容器缩放）、或内部要塞文字/图片时，clip-path 比旋转更可控：
.diamond-clip {
width: 100px;
height: 100px;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
说明：
- 四个坐标按顺时针顺序：上顶点、右顶点、下顶点、左顶点
- 用百分比定义，天然响应式；但 IE 完全不支持，Edge 17+ 才开始支持
- 如果内容溢出，会被裁剪——这点和
transform不同，后者只是视觉旋转，布局框不变
为什么不用 border-top + border-left 拼菱形
有人试过这样写：border-top: 20px solid red; border-left: 20px solid transparent;，以为能凑出菱形一角。结果发现：
- 只能生成直角三角形，最多拼出「带尖角的方块」，不是等边菱形
- 四个方向 border 同时设，会相互覆盖，交界处出现像素级错位或抗锯齿毛边
- 无法单独控制菱形的「内边距」或「描边粗细」，后期维护成本高
真正需要动态控制边长或角度时，SVG 是更稳的选择——但多数场景，rotate 或 clip-path 已足够。
别在 border 上硬拧菱形，那不是它的设计意图。该换思路的时候就换。
