[分享]css六边形替换图片代码

今天我们来学习一下如何使用 CSS 来创建六边形，用来替换图片。 首先，我们要创建一个 div 元素，然后给它一个 class 名称，暂且叫做 hexagon。 首先，我们要创建一个 div 元素，然...

今天我们来学习一下如何使用 CSS 来创建六边形，用来替换图片。 首先，我们要创建一个 div 元素，然后给它一个 class 名称，暂且叫做 hexagon。

首先，我们要创建一个 div 元素，然后给它一个 class 名称，暂且叫做 hexagon。

<div class="hexagon"></div> 

接着，我们需要把这个 div 的宽度调整成高度的平方根的两倍，具体公式如下所示：

width = height * sqrt(3) 

这里的 sqrt 是表示平方根的意思，公式计算之后，我们可以得到下面的 CSS 代码：

接着，我们需要把这个 div 的宽度调整成高度的平方根的两倍，具体公式如下所示：

.hexagon {
  height: 100px;
  width: 173.2px;
} 

下一步，我们需要使用伪元素，即 :before 和 :after，来创建六边形的形状。具体代码如下所示：

下一步，我们需要使用伪元素，即 :before 和 :after，来创建六边形的形状。具体代码如下所示：

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-left: 86.6px solid transparent;
  border-right: 86.6px solid transparent;
}

.hexagon:before {
  border-bottom: 50px solid #555;
}

.hexagon:after {
  transform: rotate(180deg);
  border-top: 50px solid #555;
} 

这段代码在 .hexagon 元素的前后都创建了一个伪元素。我们设置它们的内容为空，绝对定位，top 和 left 值都为 0，而且都使用了透明的边框。 通过设置 border-top 和 border-bottom 可以实现上下两半的六边形，最后，我们使用 transform:rotate(180deg); 来把下半部分反转 180 度，就可以完成六边形了。 最后，我们可以把这个六边形当做背景图片，使用 background-image 属性，或者通过设置 content 属性来实现替换图片的效果。 以上就是使用 CSS 来创建六边形的方法和代码，希望可以帮助大家实现更炫酷的页面效果。