css六边形加边框

CSS是用于网页排版的样式表语言，可以使网页设计更加美观、精准。其中，六边形是一种有着六个边的多边形，它有着特殊的外观，被广泛用于设计和排版中。本文将介绍如何使用CSS为六边形添加边框。

/* 1. 定义六边形的基本属性 */

.hexagon {
  width: 150px;  /* 设置宽度 */
  height: 86.6px; /* 设置高度，等于width*squre(3)/2 */
  position: relative; /* 定位为相对定位 */
  background-color: #ccc; /* 设置背景色 */
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); /* 使用clip-path属性裁剪成六边形 */
}

/* 2. 给六边形添加边框 */

.hexagon::before,.hexagon::after {
  content: ''; /* 伪元素必须有content属性 */
  position: absolute; /* 定位为绝对定位 */
  width: 0;
  border-left: 75px solid transparent; /* 给左边框设置透明 */
  border-right: 75px solid transparent; /* 给右边框设置透明 */
}

.hexagon::before {
  bottom: 100%; /* 定义位置为六边形的底部 */
  border-bottom: 43.3px solid #bbb; /* 给下边框设置颜色 */
}

.hexagon::after {
  top: 100%; /* 定义位置为六边形的顶部 */
  width: 0;
  border-top: 43.3px solid #bbb; /* 给上边框设置颜色 */
}

/* 3. 完成六边形的样式 */

.hexagon {
  display: flex; /* 设为弹性盒子 */
  justify-content: center; /* 搭配弹性盒子水平居中 */
  align-items: center; /* 搭配弹性盒子垂直居中 */
}

.hexagon p {
  margin: 0; /* 去除默认外边距 */
  text-align: center; /* 文本居中 */
  font-size: 20px; /* 文本大小 */
  color: #333; /* 文本颜色 */
}

以上代码可以实现一个带边框的六边形，具体如下：

六边形加边框