[分享]CSS六边形然后规则排序

CSS六边形是比较常用的一种特殊形状的实现方式，可以通过CSS属性和值的设置来实现。下面我们来介绍一些实现CSS六边形的方法。1. 使用padding和border生成六边形 .hexagon { w...

CSS六边形是比较常用的一种特殊形状的实现方式，可以通过CSS属性和值的设置来实现。下面我们来介绍一些实现CSS六边形的方法。

1. 使用padding和border生成六边形

.hexagon {
  width: 50px;
  height: 60px;
  position: relative;
  overflow: hidden;
}
.hexagon:before {
  content: "";
  display: block;
  padding-top: 86.6%;
}
.hexagon:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #d9e4ff;
  transform: rotate(60deg);
  border-left: 1px solid #cfd9ff;
  border-right: 1px solid #cfd9ff;
  border-top: 1px solid #cfd9ff;
}

2. 使用transform和border-radius生成六边形

.hexagon {
  position: relative;
  width: 50px;
  height: 60px;
  background: #d9e4ff;
  transform: rotate(60deg);
  border-radius: 5px;
  overflow: hidden;
}
.hexagon:before {
  content: "";
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  transform: rotate(-60deg);
  background: inherit;
  border-radius: 50%;
} 

可以看到，通过padding和border或者transform和border-radius，我们可以轻松生成六边形。但是需要注意的是，在应用到项目中时，我们需要按照一定规则来排序CSS属性和值的顺序，以保证代码可读性和维护性。

一般来说，建议按照以下顺序来排列CSS属性和值。

.hexagon {
  /* 定位属性 */
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  /* 显示和尺寸属性 */
  display: block;
  width: 50px;
  height: 60px;
  /* 盒模型属性 */
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  /* 背景和颜色属性 */
  background-color: #d9e4ff;
  color: #333;
  /* 字体和文本属性 */
  font-size: 14px;
  text-align: center;
  /* 动画和过渡属性 */
  transition: all .3s;
  animation-name: example;
  animation-duration: 3s;
} 

这样的排列顺序，可以让代码更加清晰易读，并且便于修改和维护。