格式化六边形 CSS 获取 - CSS

六边形在设计中很常见。在CSS中实现六边形非常简单。在本文中，我们将学习如何使用纯CSS实现六边形的格式化。

实现六边形的基本规则

要制作六边形，我们需要将其设置为宽度和高度相等的形状，并且必须拥有六个相同的边角。让我们看一下一个简单的代码片段，它用纯CSS实现了一个基本的六边形：

.hexagon {
    width: 100px;
    height: 55px;
    background-color: #ffcc33;
    position: relative;
}
.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    top: -25px;
    border-bottom: 25px solid #ffcc33;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
.hexagon:after {
    bottom: -25px;
    border-top: 25px solid #ffcc33;
}

这个代码片段创建了一个黄色的六边形，高度为55个像素，宽度为100个像素。该六边形的上下两个三角形都有25个像素的高度，而左右两边的三角形则是由透明的边框线构成。一个更加详细的解释如下：

1. .hexagon 这个类用来定义一个元素，并设置了它的宽度、高度和背景颜色。
2. :before选择器用来定义元素的上半边三角形。它使用了绝对定位，将三角形移动到六边形的顶部，并用一个边框使之形成三角形。
3. :after这个选择器用来定义元素的下半边三角形。它使用了较少的CSS代码，因为它与上面的三角形共享了一条边框。

六边形格式化

一旦我们创建了一个基本的六边形，让我们看一下如何使用纯CSS的方法来格式化它，使之成为更复杂的形状。

带阴影的六边形

如果你想要给你的六边形添加一些阴影效果，那么你可以在 .hexagon 类中添加一些阴影的属性，如下所示：

.hexagon {
    width: 100px;
    height: 55px;
    background-color: #ffcc33;
    position: relative;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

这里我们添加了一个黑色的光晕阴影，并为之增加了一点透明度，使之看上去更加好看。

带边框的六边形

你还可以为你的六边形添加边框属性，让它看起来更加实用。下面的代码片段可以让你制作一个带有白色边框和黑色背景的六边形：

.hexagon {
    width: 100px;
    height: 55px;
    background-color: #000;
    position: relative;
    border: 1px solid #fff;
}
.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    top: -25px;
    border-bottom: 25px solid #000;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
.hexagon:after {
    bottom: -25px;
    border-top: 25px solid #000;
}

这个版本的六边形在原版基础上增加了边框属性，使得六边形有了更紧密的感觉。

转角的六边形

如果你想要制作一个六边形，它在某些角上有一些转角，你可以使用 border-radius 模块。下面的代码片段定义了一个有四个圆角的六边形：

.hexagon {
    width: 100px;
    height: 55px;
    background-color: #3c3c3c;
    position: relative;
    border-radius: 10px 0 10px 0;
}
.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    top: -25px;
    border-bottom: 25px solid #3c3c3c;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
.hexagon:after {
    bottom: -25px;
    border-top: 25px solid #3c3c3c;
}

这个六边形在左上角和右下角两个角有了圆角。

倾斜的六边形

最后，我们来制作一个倾斜的六边形。这个六边形更加的有趣一些，因为它的边缘向左侧倾斜。下面的代码片段可以让你制作这样一个形状：

.hexagon {
    width: 100px;
    height: 100px;
    background-color: #ffcc33;
    position: relative;
    transform: skewY(-30deg);
    transform-origin: top;
}
.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    top: -20px;
    width: 70.71px;
    height: 70.71px;
    background-color: #ffcc33;
    transform: skewY(30deg);
}
.hexagon:before {
    left: -35.35px;
}
.hexagon:after {
    right: -35.35px;
}

这个六边形使用了 transform 属性使其倾斜，同时也应用了 transform-origin 属性来让它倾斜的基准点保持在顶部。这个版本的六边形使用了额外块来定义其三角形区域上的背景。

结论

CSS非常适合创建六边形这样的形状。这个形状简单而优美，并且可以通过一些基本的CSS属性来增加转角和倾斜等效果。使用上面介绍的代码片段，你也可以制作出一些非常有趣的六边形。