CSS六边形创建：HTML实体方法详解
在Web开发中，创建六边形等复杂形状是常见的需求。本文将详细介绍如何使用HTML实体方法结合CSS来创建六边形，这种方法简单高效且兼容性好。
一、HTML实体方法原理
HTML实体方法利用CSS的伪元素和边框技巧，通过单个HTML元素配合其::before和::after伪元素来构建六边形。核心原理是：
主元素作为六边形的中心部分
::before伪元素创建六边形的上半部分
::after伪元素创建六边形的下半部分
二、基础实现代码
以下是使用HTML实体方法创建六边形的完整代码：
.hexagon {
position: relative;
width: 100px;
height: 55px;
background-color: #64C7CC;
margin: 27.5px 0;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 27.5px solid #64C7CC;
}
.hexagon:after {
top: 100%;
border-top: 27.5px solid #64C7CC;
}对应的HTML结构非常简单：
<div class="hexagon"></div>
三、代码解析
1. 主元素样式
position: relative：为伪元素提供定位上下文width: 100px：六边形的宽度height: 55px：六边形的高度（根据正六边形比例计算）background-color：六边形的填充颜色margin: 27.5px 0：上下外边距，使六边形之间不重叠
2. 伪元素通用样式
content: ""：伪元素必需属性position: absolute：绝对定位width: 0：宽度为0，通过边框创建三角形border-left和border-right：左右透明边框，形成等腰三角形的两侧
3. ::before伪元素
bottom: 100%：定位在主元素顶部border-bottom：底部边框颜色与主元素相同，形成六边形的上半部分
4. ::after伪元素
top: 100%：定位在主元素底部border-top：顶部边框颜色与主元素相同，形成六边形的下半部分
四、尺寸调整与变形
要创建不同大小的六边形，只需调整以下三个值：
| 属性 | 说明 | 计算公式 |
|---|---|---|
| width | 主元素宽度 | 任意值（W） |
| height | 主元素高度 | W × √3 / 2 ≈ W × 0.866 |
| border-left/right | 伪元素左右边框 | W / 2 |
| border-bottom/top | 伪元素底部/顶部边框 | height / 2 |
示例：创建200px宽的六边形
.hexagon-large {
width: 200px;
height: 173.2px; /* 200 × 0.866 */
margin: 86.6px 0; /* height / 2 */
}
.hexagon-large:before,
.hexagon-large:after {
border-left: 100px solid transparent; /* 200 / 2 */
border-right: 100px solid transparent;
}
.hexagon-large:before {
border-bottom: 86.6px solid #64C7CC; /* 173.2 / 2 */
}
.hexagon-large:after {
border-top: 86.6px solid #64C7CC;
}五、添加文本内容
要在六边形中添加文本，可以将文本放在主元素内，并调整行高和文本对齐方式：
<div class="hexagon-with-text">六</div>
.hexagon-with-text {
position: relative;
width: 100px;
height: 55px;
background-color: #64C7CC;
margin: 27.5px 0;
line-height: 55px; /* 等于height，垂直居中 */
text-align: center; /* 水平居中 */
color: white;
font-weight: bold;
}
.hexagon-with-text:before,
.hexagon-with-text:after {
content: "";
position: absolute;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon-with-text:before {
bottom: 100%;
border-bottom: 27.5px solid #64C7CC;
}
.hexagon-with-text:after {
top: 100%;
border-top: 27.5px solid #64C7CC;
}六、响应式设计
要使六边形响应不同屏幕尺寸，可以使用相对单位：
.hexagon-responsive {
position: relative;
width: 20vw; /* 视口宽度的20% */
height: 17.32vw; /* 20 × 0.866 */
background-color: #64C7CC;
margin: 8.66vw 0; /* height / 2 */
}
.hexagon-responsive:before,
.hexagon-responsive:after {
content: "";
position: absolute;
width: 0;
border-left: 10vw solid transparent; /* width / 2 */
border-right: 10vw solid transparent;
}
.hexagon-responsive:before {
bottom: 100%;
border-bottom: 8.66vw solid #64C7CC; /* height / 2 */
}
.hexagon-responsive:after {
top: 100%;
border-top: 8.66vw solid #64C7CC;
}七、浏览器兼容性
此方法兼容所有现代浏览器，包括：
Chrome 4+
Firefox 3.5+
Safari 3.2+
Opera 10.1+
IE 9+
对于旧版IE浏览器，可能需要添加特定的滤镜或使用VML技术，但现代项目中已很少需要考虑这些。
八、总结
HTML实体方法创建六边形具有以下优点：
代码简洁，仅需一个HTML元素
易于理解和维护
兼容性好
支持动态尺寸调整和响应式设计
通过灵活运用这种方法，可以轻松创建各种样式的六边形，满足不同的设计需求。在实际项目中，可以根据具体场景选择合适的尺寸和颜色方案。