使用HTML和CSS实现空心菱形，可通过创建div元素并利用CSS transform旋转与边框样式组合完成，首先设置一个正方形元素，通过border属性绘制四个三角形边框，将背景色设为透明，边框颜色设为菱形边框色，然后利用transform: rotate(45deg)将正方形旋转45度，形成菱形轮廓，关键在于控制边框宽度与元素宽高比例，确保菱形边框清晰空心，无需复杂JavaScript，仅用CSS样式即可实现简洁的空心菱形效果。
HTML 实现空心菱形打印：从基础到代码解析
空心菱形是一种常见的几何图形，在网页设计中常用于装饰、图案展示或作为视觉元素，通过 HTML 和 CSS 的结合，我们可以轻松实现空心菱形的打印效果，无需依赖复杂的 JavaScript，本文将从基础原理出发，分步骤讲解实现过程，并提供完整代码示例,帮助读者掌握这一技巧。
空心菱形的结构原理
空心菱形本质上是由四条相等的边组成的封闭图形，对角线互相垂直且平分，从 CSS 实现的角度看，我们可以将其拆解为上下两个三角形和左右两个三角形的组合，或者通过边框技巧直接构建四条边，本文采用更简洁的“边框旋转法”，利用 CSS 的 border 属性生成三角形,再通过旋转组合成菱形。
实现步骤：从零开始构建空心菱形
基础 HTML 结构
我们需要一个容器来包裹菱形，并通过内部的元素构建菱形的四条边，这里使用一个 div 作为菱形的父容器，内部用两个子 div 分别代表“上下边”和“左右边”，每个子 div 再通过伪元素 :before 和 :after 生成对应的三角形。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">空心菱形打印</title>
<style>
/* 样式将在下一步添加 */
</style>
</head>
<body>
<div class="diamond-container">
<div class="diamond-top-bottom"></div>
<div class="diamond-left-right"></div>
</div>
</body>
</html>
CSS 样式设计：构建三角形并组合成菱形
（1）父容器：居中与尺寸控制
为了让菱形在页面中居中显示，我们需要设置父容器的样式，同时定义菱形的整体大小（通过 width 和 height 控制菱形的“边长”）。
.diamond-container {
position: relative;
width: 200px; /* 菱形的水平宽度 */
height: 200px; /* 菱形的垂直高度 */
margin: 100px auto; /* 上下间距100px，水平居中 */
}
（2）上下边：生成上下两个三角形
.diamond-top-bottom 负责生成菱形的上下两条边，通过设置 :before 和 :after 伪元素，分别创建“上三角形”和“下三角形”，三角形的实现核心是：将元素的 width 和 height 设为 0，通过 border 属性控制三角形的形状和颜色。
.diamond-top-bottom {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
}
/* 上三角形：border-bottom控制三角形高度，border-left/right控制宽度 */
.diamond-top-bottom::before {
content: '';
position: absolute;
top: -100px; /* 向上偏移，形成上边 */
left: -50px; /* 向左偏移，居中对齐 */
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #333; /* 三角形颜色（即菱形边框颜色） */
}
/* 下三角形：border-top控制高度，与上三角形对称 */
.diamond-top-bottom::after {
content: '';
position: absolute;
top: 0; /* 从父元素顶部开始，形成下边 */
left: -50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #333;
}
（3）左右边：生成左右两个三角形
.diamond-left-right 负责生成菱形的左右两条边，原理与上下边类似，但需要将三角形旋转 90 度,使其方向调整为左右。
.diamond-left-right {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg); /* 旋转90度，方向调整为左右 */
width: 0;
height: 0;
}
/* 左三角形：border-bottom控制高度，旋转后形成左边 */
.diamond-left-right::before {
content: '';
position: absolute;
top: -100px;
left: -50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #333;
}
/* 右三角形：border-top控制高度，与左三角形对称 */
.diamond-left-right::after {
content: '';
position: absolute;
top: 0;
left: -50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #333;
}
完整代码与效果
将上述 HTML 和 CSS 代码整合，即可得到一个居中的空心菱形,完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">空心菱形打印</title>
<style>
body {
background-color: #f5f5f5; /* 背景色，便于观察菱形 */
}
.diamond-container {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
}
.diamond-top-bottom {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
}
.diamond-top-bottom::before {
content: '';
position: absolute;
top: -100px;
left: -50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #333;
}
.diamond-top-bottom::after {
content: '';
position: absolute;
top: 0;
left: -50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #333;
}
.diamond-left-right {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
width: 0;
height: 0;
}
.diamond-left-right::before {
content: '';
position: absolute;
top: -100px;
left: -50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #333;
}
.diamond-left-right::after {
content: '';
position: absolute;
top: 0;
left: -50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #333;
}
</style>
</head>
<body>
<div class="diamond-container">
<div class="diamond-top-bottom"></div>
<div class="diamond-left-right"></div>
</div>
</body>
</html>
运行上述代码，页面中将显示一个边长为 200px（水平/垂直方向）的空心菱形，边框颜色为深灰色（#333），背景为浅灰色（#f5f5f5）。
关键代码解析
三角形生成原理
通过设置 width: 0; height: 0;，将元素变为一个“点”，再通过 border 属性控制三角形的形状：
border-left和border-right设为transparent（透明），border-bottom设为实色，可生成“向下”的三角形；- 反之，
border-top设为实色，可生成“向上”的三角形； - 左右三角形则通过旋转元素实现。
定位与居中
- 父容器
.diamond-container使用margin: 100px auto;实现水平居中； - 子元素通过
position: absolute+top: 50%; left: 50%; transform: translate(-50%, -50%);实现绝对居中（相对于父容器）。
尺寸控制
菱形的大小由 border 的宽度决定：
border-left/right: 50px solid transparent控制三角形的底边长度（即菱形的“半宽”）；border-bottom/top: 100px solid #333控制三角形的高度（即菱形的“半高”）；- 菱形的完整宽度为
50px * 2 = 100px，高度为100px * 2 = 200px（若需调整，修改这两个值即可）。
扩展：动态调整菱形大小
如果需要动态调整菱形的大小（例如通过用户输入或按钮交互），可以通过 CSS 变量（Custom Properties）实现，避免重复修改代码，修改后的 CSS 如下：
.diamond-container {
--diamond-size: 200px; /* 定义菱形尺寸变量 */
--border-width: 50px; /* 三角形底边半宽 */
--border-height: 100px; /* 三角形高度 */
position: relative;
width: var(--diamond-size);
height: var(--diamond-size);
margin: 100px auto;
}
.diamond-top-bottom::before {
top: calc(-1 * var(--border-height));
left: calc(-1 * var(--border-width));
border-left: var(--border-width) solid transparent;
border-right: var(--border-width) solid transparent;
border-bottom: var(--border-height) solid #333;
}
/* 其他伪元素同步修改变量值 */
只需修改 .diamond-container 中的 --diamond-size、--border-width 和 --border-height 变量,即可动态调整菱形大小。
通过 HTML 和 CSS 实现空心菱形，核心是利用 border 属性生成三角形，再通过旋转和定位组合成菱形，这种方法无需 JavaScript，代码简洁且性能优异，适合静态展示场景，如果需要动态交互，可结合 CSS 变量或 JavaScript 进一步优化，掌握这一技巧，不仅能提升前端图形绘制能力,还能为网页设计增添更多视觉可能性。
