[分享]css六边行代码

CSS六边形效果正是今天我们要分享的内容。六边形设计已逐渐成为网站设计中的一种趋势，这种设计既可用于Logo标识，也可作为页面排版的基础元素，实现多种视觉效果。下面是一段使用 CSS 实现六边形的代码...

CSS六边形效果正是今天我们要分享的内容。六边形设计已逐渐成为网站设计中的一种趋势，这种设计既可用于Logo标识，也可作为页面排版的基础元素，实现多种视觉效果。

下面是一段使用 CSS 实现六边形的代码示例：

.hexagon {
  position: relative;
  width: 100px;
  height: 55px;
  background-color: #690a0a;
  margin: 27.5px 0;
  float: left;
  transform: rotate(-30deg) skewX(30deg) ;
  border-left: solid 3px #fff;
  border-right: solid 3px #fff;
}

.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: 28.75px solid #690a0a;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 28.75px solid #690a0a;
} 

上述 CSS 代码有何作用呢？我们面向一张平凡无奇的矩形，通过 transform: rotate(-30deg) skewX(30deg) 规则，倾斜外框部分，然后使用 before 和 after 伪元素画出六边形中的两边，最后，使用底边和上边之间的 padding 作为六边形的两条边，便能成功地实现该效果。

这个例子仅仅是一种简单的实现方式，实现六边形效果还有很多方法，更可按照实际需求定制不同的六边形样式，如果您对 CSS 六边形效果感兴趣，不妨多尝试一些不同的实现方式吧！