CSS六边形

发布时间：2023-05-18

CSS六边形介绍

CSS六边形，指的是利用CSS绘制的六边形图形。六边形是一种常见的图形，它在Web开发中应用广泛。CSS六边形的优点在于可以响应式布局，不需要使用图片，对于网站性能优化有很大帮助。

CSS六边形代码

下面是CSS绘制六边形的代码示例：

.hexagon {
  width: 100px;
  height: 55px;
  position: relative;
  overflow: hidden;
}
.hexagon:before, .hexagon:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: inherit;
  transform: rotate(60deg);
}
.hexagon:before {
  transform: rotate(-60deg);
}
.hexagon:after {
  transform: rotate(120deg);
}

这段代码使用了:before和:after伪元素来绘制六边形。通过transform:rotate()来控制伪元素的旋转角度，从而得到六边形的形状。其中，必须设置宽高一致，并通过overflow:hidden将多余部分裁剪掉。

CSS六边形导航选项卡

利用CSS六边形可以实现独特的导航选项卡。下面是一段示例代码：

.navigation {
  display: flex;
  justify-content: center;
  align-items: center;
}
.navigation-item {
  margin: 0 20px;
  position: relative;
  cursor: pointer;
}
.navigation-item:before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  transform-origin: bottom center;
  transform: skewX(-30deg) rotate(-60deg);
  transition: transform 0.3s ease-in-out;
}
.navigation-item:hover:before {
  transform: skewX(-30deg) rotate(0deg);
}

这段代码使用了伪元素:before来实现独特的导航选项卡样式。通过设置transform:skewX()和transform:rotate()属性来让伪元素变形成六边形。当鼠标悬浮于选项卡上时，通过:hover选择器来改变伪元素的transform属性，实现动态效果。

CSS六边形边框

通过利用CSS六边形绘制边框，可以在Web开发中实现精美的效果。下面是一段示例代码：

.border {
  width: 200px;
  height: 200px;
  position: relative;
}
.border:before, .border:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border: 2px solid #333;
  transform: rotate(60deg);
}
.border:before {
  transform: rotate(-60deg);
}
.border:after {
  transform: rotate(120deg);
}

这段代码使用了伪元素:before和:after来绘制六边形形状的边框。利用border属性可设置边框样式。需要注意的是，这里的六边形宽高一致，并且边框要减去宽度，不然会出现溢出问题。

CSS六边形图片

利用CSS六边形可以绘制出特殊形状的图片展示。下面是一段示例代码：

.image {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.image:before, .image:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: url("image.jpg");
  transform: rotate(60deg);
}
.image:before {
  transform: rotate(-60deg);
}
.image:after {
  transform: rotate(120deg);
}

这段代码利用伪元素:before和:after来绘制六边形形状的背景，而图片则通过普通元素来绝对定位居中。需要注意的是，这里的六边形宽高一致，并且图片需要使用z-index属性调整层级，以免被覆盖。

CSS六边形拼接布局

利用CSS六边形，可以实现多个六边形拼接成布局的效果。下面是一段示例代码：

.layout {
  width: 100%;
  height: 600px;
  position: relative;
  margin-top: 50px;
}
.layout-item {
  position: absolute;
  width: 200px;
  height: 200px;
}
.layout-item:nth-child(even) {
  top: 150px;
}
.layout-item:nth-child(odd) {
  top: 300px;
}
.layout-item:nth-child(1), .layout-item:nth-child(2), .layout-item:nth-child(3) {
  left: 50%;
  transform: translateX(-350px);
}
.layout-item:nth-child(4), .layout-item:nth-child(5), .layout-item:nth-child(6) {
  left: 50%;
  transform: translateX(150px);
}
.layout-item:before, .layout-item:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #f1f1f1;
  transform: rotate(60deg);
}
.layout-item:before {
  transform: rotate(-60deg);
}
.layout-item:after {
  transform: rotate(120deg);
}

这段代码利用伪元素:before和:after来绘制六边形形状的背景，而布局则通过普通元素来绝对定位控制位置。通过:nth-child选择器指明每个六边形的位置和偏移量。此外，为了控制背景颜色，需要将伪元素设置为z-index:-1。

CSS六边形DIV怎么画

在HTML中，使用div元素可以轻松绘制CSS六边形。下面是一段示例代码：

<div class="hexagon">我是六边形</div>
<style>
.hexagon {
  width: 100px;
  height: 55px;
  position: relative;
  overflow: hidden;
}
.hexagon:before, .hexagon:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: inherit;
  transform: rotate(60deg);
}
.hexagon:before {
  transform: rotate(-60deg);
}
.hexagon:after {
  transform: rotate(120deg);
}
</style>

这段代码利用div元素来包裹内容，然后根据前面提到的六边形代码，设置相应的CSS样式即可。需要注意的是，这里的宽高也是根据内容进行设置。

CSS六边形蜂窝拼接

使用CSS六边形，可以实现多个六边形蜂窝拼接的布局效果。下面是一段示例代码：

.honeycomb {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.honeycomb-item {
  width: 100px;
  height: 55px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform .3s;
  margin: -1px 0 0 -1px;
  z-index: 1;
}
.honeycomb-item:hover {
  transform: scale(1.1);
  z-index: 2;
}
.honeycomb-item:before, .honeycomb-item:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: inherit;
  transform: rotate(60deg);
}
.honeycomb-item:before {
  transform: rotate(-60deg);
}
.honeycomb-item:after {
  transform: rotate(120deg);
}

这段代码通过display:flex来控制布局，使用:hover伪类和transform:scale()属性达到交互效果。其中，.honeycomb-item类设置了宽高，以及伪元素的CSS样式。注意，需要将.honeycomb-item设置为flex-shrink:0，以避免缩小时突然变形。

CSS六边形怎么设置成背景图

使用CSS六边形，可以非常方便地将一个六边形设置为背景图。下面是一段示例代码：

.background {
  width: 100%;
  height: 600px;
  position: relative;
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center center;
}
.background:before, .background:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transform: rotate(60deg);
  background: rgba(0,0,0,.5);
}
.background:before {
  transform: rotate(-60deg);
}
.background:after {
  transform: rotate(120deg);
}

这段代码，设置了一个父元素.background，并设置了背景图片、大小、位置等属性。然后，通过伪元素:before和:after来设置六边形的背景颜色。需要注意，这里的伪元素z-index要为-1。

CSS实现六边形

最后，我们放出一个完整的CSS六边形实现示例，供读者参考：

.hexagon {
  width: 50px;
  height: 28.75px;
  position: relative;
  margin: 14.38px 0;
  background-color: #64C7CC;
}
.hexagon:before, .hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}
.hexagon:before {
  bottom: 100%;
  border-bottom: 14.38px solid #64C7CC;
}
.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 14.38px solid #64C7CC;
}

这段代码为固定大小的六边形，它的背景颜色为蓝绿色。其中，主要是利用伪元素和CSS框模型，设置border属性绘制出六边形的边框形状，从而得到六边形样式。

推荐文章