小白必看的css 之 如何使用CSS创建一个六边形的图形

前言

在本教程中，我们将学习如何使用CSS创建一个六边形的图形。这个图形具有动态的过渡效果，当鼠标悬停在图形上时，它会变得更大。下面是实现这个效果的代码：

我们需要为所有元素设置一些基本的样式，以确保没有任何边距或填充。这可以通过以下代码实现：

* {
	margin: 0;
	padding: 0;
}

接下来，需要设置整个页面的背景颜色。在这个例子中，我们将背景颜色设置为#353b48：

body {
	background-color: #353b48;
}

现在，开始创建六边形的图形。我们首先设置了一个容器元素，并为其添加.hexagon类。我们将使用绝对定位将该容器居中显示，并将字体大小和颜色设置为适当的值：

.hexagon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 40px;
	color: #f1f2f6;
	text-transform: capitalize;
	text-align: center;
}

然后，为容器元素和容器元素的::before和::after伪元素设置了相同的宽度和高度。同时，我们设置了它们的line-height属性，以使文本居中显示。我们还添加了左右两侧的边框，将边框颜色设置为#487eb0：

.hexagon,
.hexagon::before,
.hexagon::after {
	width: 208px;
	height: 121px;
	line-height: 120px;
	border-left: 1px solid #487eb0;
	border-right: 1px solid #487eb0;
	transition: 1s linear;
}

接下来，为容器元素的::before和::after伪元素设置绝对定位，并将它们的内容设置为空字符串。然后，我们使用transform属性将::before伪元素旋转60度，并将::after伪元素旋转-60度：

.hexagon::before,
.hexagon::after {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
}

.hexagon::before {
	transform: rotate(60deg);
}

.hexagon::after {
	transform: rotate(-60deg);
}

通过鼠标悬停在图形上时，将容器元素的宽度和高度增加，从而实现动态过渡效果：

.hexagon:hover,
.hexagon:hover::before,
.hexagon:hover::after {
	width: 312px;
	height: 181px;
	line-height: 180px;
}

恭喜！你已经成功创建了一个具有动态过渡效果的六边形图形。 希望这个教程对你有所帮助！