css怎么写六边形

1. 什么是六边形？

六边形，又称六角形，是指有六个边的多边形。在几何学中，六边形是个十分重要的多边形，因为它可以分割成等边三角形或等边六边形。在视觉设计中，六边形也是一个非常流行的形状。

那么，在网页设计中，如何用 CSS 实现六边形？接下来，我们将从两种角度来探讨这个问题：

1.1. 用 CSS 实现六边形的方法

实现六边形的方法有很多种，但以下两种是最常用的。

1.1.1. 利用 CSS3 的 transform 属性

我们可以利用 CSS3 的 transform 属性来实现六边形效果。具体来说，我们需要使用以下样式：

.hexagon{
    width: 100px;
    height: 55px;
    background-color: #6C6;
    position: relative;
    margin: 27.5px 0;
}
.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: 27.5px solid #6C6;
}
.hexagon:after{
    top: 100%;
    width: 0;
    border-top: 27.5px solid #6C6;
}

可以看到，在上述代码中，我们使用了伪元素 :before 和 :after，制造了两个三角形，然后将它们旋转了 60 度，并用绝对定位将它们定位在六边形的两侧。为了制造出完整的六边形，我们还需要设置一些样式。

1.1.2. 利用 CSS3 的 clip-path 属性

另一种实现六边形的方法是利用 CSS3 的 clip-path 属性。具体来说，我们需要使用以下样式：

.hexagon{
    width: 100px;
    height: 55px;
    background-color: #6C6;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

可以看到，在上述代码中，我们使用了 clip-path: polygon() 函数来制造出一个六边形。该函数接受一系列坐标值，每两个坐标值代表一个点的横、纵坐标，多个点连成一个六边形。

2. 怎样在网页中使用六边形？

既然学会了用 CSS 实现六边形，我们接下来看看怎样在网页中使用它。

2.1. 应用在菜单栏中

六边形可以应用在菜单栏中，作为各个菜单项的标识。具体来说，我们可以使用以下样式：

.menu{
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}
.menu li{
    display: inline-block;
    margin-right: 10px;
    position: relative;
}
.menu li a{
    display: block;
    padding: 10px 25px;
    background-color: #666;
    color: #fff;
    text-decoration: none;
}
.menu li a:before,
.menu li a:after{
    content: "";
    position: absolute;
    bottom: -10px;
    border-width: 0 25px 10px;
    border-style: solid;
    border-color: transparent;
}
.menu li a:before{
    left: 0;
    border-right-width: 25px;
    border-right-color: #666;
}
.menu li a:after{
    right: 0;
    border-left-width: 25px;
    border-left-color: #666;
}

可以看到，在上述代码中，我们为菜单项添加了伪元素 :before 和 :after，并设置它们的样式来形成六边形。另外，我们还为菜单项设置了相对定位和负的底部外边距，以使得六边形与菜单项完美连接。

2.2. 应用在背景中

六边形可以应用在网页背景中，以制造出完美的几何形状。具体来说，我们可以使用以下样式：

.background{
    height: 400px;
    background-image: url("bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

可以看到，在上述代码中，我们使用了 clip-path: polygon() 函数来制造出一个六边形，然后将其应用到背景中，使整个网页呈现出一种独特的几何感。

3. 总结

在本文中，我们介绍了两种实现六边形的方法，并且探讨了如何在网页中使用六边形。六边形是一种极具美感和几何感的形状，常常应用于网页设计中。使用 CSS 实现六边形并不难，只需要了解一些 CSS 特性，就能够轻松实现。

总结：本文介绍了两种实现六边形的方法，并且探讨了如何在网页中使用六边形。