CSS实现内部文字的六边形

在网页设计中，六边形是一种常见的图形形状，因此如何使用CSS实现六边形是值得我们探讨的话题。

本文将介绍如何使用CSS实现一个内部带文本的六边形。

HTML

首先我们需要先定义HTML代码，如下：

<div class="hexagon">
  <div class="hexagon-text">内部文本</div>
</div>

解释一下这段代码：我们定义了一个class为"hexagon"的div，内部包含一个class为"hexagon-text"的div，这个内部div即为要显示的文本。在CSS实现中，我们将根据这两个div的class进行样式设置。

CSS

接着，我们来设置CSS样式。首先是六边形的外部样式，如下：

.hexagon {
    width: 100px;
    height: 55px;
    position: relative;
    margin: 0 auto;
    background-color: #6C5CE7;
    transform: rotate(120deg);
    overflow: hidden;
}

上述代码中，我们使用了transform属性将六边形旋转了120度，同时使用overflow属性隐藏了溢出元素（即六边形的三个角）。

接下来，我们为六边形添加两个伪元素，在六边形的两侧添加三角形，如下：

.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
.hexagon:before {
    left: -50px;
    border-bottom: 25px solid #6C5CE7;
    border-top: 25px solid transparent;
}
.hexagon:after {
    left: 100px;
    border-bottom: 25px solid #6C5CE7;
    border-top: 25px solid transparent;
}

上述代码是CSS实现六边形的重点，这里我们使用了伪元素:before和:after来添加三角形。

在这两个伪元素中，我们设置了左侧的三角形（即:before）的左偏移量为-50px，右侧的三角形（即:after）的左偏移量为100px。这里的50px是为了使两个三角形贴合在一起。

左侧三角形的边界为：下部边界为25px粉色实心，上部边界为25px透明。右侧三角形的边界同样是这样设置。

到此为止，我们已经实现了六边形的外部样式，接下来，我们来添加内部文本。

我们为内部文本的div添加CSS样式如下：

.hexagon-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 16px;
}

上述代码中，我们使用了position属性将内部文本定位在六边形的中心，使用transform属性对文本进行位移调整。另外，我们设置了颜色和字体大小为白色和16px。

总结

本文通过HTML+CSS实现了一个内部带文本的六边形，并详细介绍了实现过程。相信读者们在充分理解本文之后，也能够动手尝试实现自己的六边形效果。