css三角形里面文字居中

在使用CSS制作三角形时，我们有时需要在三角形内部添加文字。然而，由于三角形的形状和CSS盒模型的特性，这并不是一件容易的事情。在这篇文章中，我们将介绍一种方法，使用这种方法可以让三角形内部的文字居中。

.triangle {
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 40px 0 40px;
  border-color: #007bff transparent transparent transparent;
}

.triangle:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 40px 0 40px;
  border-color: white transparent transparent transparent;
  top: -40px;
  left: -40px;
} 

上面的代码中定义了一个`triangle`类，这将用于创建一个三角形。我们使用`border`属性创建这个三角形，设置上边缘的宽度为40像素，右边和左边的宽度也为40像素，底部的宽度为0。我们将`border-color`设置为蓝色的`#007bff`和透明，这样就可以得到蓝色的三角形。我们使用`:before`伪元素来创建一个白色的三角形，将其放置在蓝色三角形的顶部，这样就能产生内部文本居中的效果。

我们可以使用以下HTML代码来添加三角形和文字：

<div class="triangle">
  <span>这是三角形内部的文本</span>
</div> 

我们使用`span`标签来包含文字，然后将其放置在三角形内部。在CSS中，我们为`span`设置`position: absolute`、`top: 50%`和`left: 50%`，然后使用`transform`属性将其向上和向左移动，直到文字位置居中：

.triangle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

使用上述代码，我们就可以在一个三角形内部居中放置文本。这种方法可以用于多种场景，如创建带三角形下拉框的导航菜单等。