在网页设计中，形状的多样性往往能提升视觉表现力。虽然矩形和圆形是常见的基本图形，但有时我们还需要展示更具艺术感的图形——比如菱形。那么，在纯前端技术栈中，如何使用 HTML 和 CSS 或者 Canvas 来绘制一个标准的菱形呢？本文将深入讲解两种主流方法：利用 CSS 的 border 属性技巧以及使用 HTML5 的 Canvas API，帮助开发者灵活掌握菱形的实现方式。

使用 CSS border 属性绘制菱形

CSS 并没有直接提供“绘制菱形”的属性，但我们可以通过巧妙地利用 border 的特性来实现。核心原理是：当一个元素的宽高为0，且四个方向的边框设置相等时，浏览器会将每个边框渲染成三角形。通过隐藏其他三个边框，只保留一个可见的边框，再结合旋转，就能拼出菱形。

具体实现如下：

html

css .diamond-css { width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #3498db; transform: rotate(45deg); margin: 100px auto; }

这段代码创建了一个宽高为0的 div，通过设置 border 为50px并仅让底边有颜色，形成一个向下的三角形。然后通过 transform: rotate(45deg) 将其旋转45度，视觉上就变成了一个倾斜的菱形。这种方法简单高效，适合用于装饰性图标或小提示元素。

若要得到一个更完整的菱形（上下左右都有颜色），可以使用两个伪元素叠加：

css
.diamond-full {
position: relative;
width: 0;
height: 0;
margin: 100px auto;
}

.diamond-full::before,
.diamond-full::after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 50px solid transparent;
}

.diamond-full::before {
border-bottom-color: #e74c3c;
top: -50px;
left: -50px;
}

.diamond-full::after {
border-top-color: #e74c3c;
top: 50px;
left: -50px;
}

这样上下两个三角形拼接，形成一个实心菱形。这种方式不依赖图片资源，兼容性好，适合响应式布局。

使用 Canvas 绘制精确菱形

如果需要更复杂的图形控制，例如动态绘制、动画效果或与其他图形组合，HTML5 的 <canvas> 是更强大的选择。Canvas 提供了完整的绘图 API，可以自由绘制路径、填充颜色、添加阴影等。

首先在 HTML 中定义 canvas 元素：

html <canvas id="diamond-canvas" width="200" height="200"></canvas>

接着使用 JavaScript 在画布上绘制菱形：

javascript
const canvas = document.getElementById('diamond-canvas');
const ctx = canvas.getContext('2d');

// 设置菱形中心点和大小
const centerX = 100;
const centerY = 100;
const size = 80;

// 开始绘制路径
ctx.beginPath();
ctx.moveTo(centerX, centerY - size); // 上顶点
ctx.lineTo(centerX + size, centerY); // 右顶点
ctx.lineTo(centerX, centerY + size); // 下顶点
ctx.lineTo(centerX - size, centerY); // 左顶点
ctx.closePath();

// 填充颜色
ctx.fillStyle = '#9b59b6';
ctx.fill();

// 可选：添加边框
ctx.strokeStyle = '#8e44ad';
ctx.lineWidth = 3;
ctx.stroke();

这段代码通过 moveTo 和 lineTo 定义了菱形的四个顶点，形成一个闭合路径，再进行填充和描边。Canvas 的优势在于可编程性强，可以轻松实现旋转、缩放、渐变填充甚至动画效果。例如，通过 requestAnimationFrame 实现菱形旋转动画，或根据用户交互实时改变形状。

此外，Canvas 还支持阴影、透明度、复合操作等高级视觉效果，适用于数据可视化、游戏开发或复杂UI组件。

总结对比

CSS 方法适合静态、轻量级的菱形需求，代码简洁，性能优异，尤其适合图标类元素；而 Canvas 更适合动态、复杂或需要精细控制的场景，虽然代码稍多，但灵活性极高。开发者应根据实际项目需求选择合适的技术方案。无论是用 CSS 的“奇技淫巧”还是 Canvas 的强大绘图能力，都能在网页中呈现出美观的菱形效果，丰富页面的视觉层次。