css三角里面加文字

CSS的三角形是常用的元素，可以用来构建箭头、对话框等，这些元素在网页设计中具有很好的效果。但如果要在三角形里面添加文字该怎么做呢？下面我们来介绍一种实现这一目标的方法。

 .box {
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-bottom: 20px solid red;
        position: relative;
    }
    
    .box:after {
        content: ';
        position: absolute;
        top: -20px;
        left: -20px;
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-top: 20px solid red;
    }
    
    .text {
        position: absolute;
        top: -15px;
        left: -15px;
        color: #fff;
    } 

上面的代码中，我们使用了两个伪元素`::before`和`::after`来构建三角形。其中，`.box`代表三角形的底部，`::before`代表上部斜边，`::after`代表左部斜边。

在`.box`中，我们设置了`width: 0`、`height: 0`以及`border`的宽度，这样就构成了一个三角形。在`.box`和`::after`中，我们将边框的颜色设置为`transparent`，这样就只显示了两条边。在`border-bottom`和`border-top`中，我们将颜色设置为红色，这样整个三角形就是红色的。

接下来，我们使用`::after`伪元素来创建三角形的上部斜边。我们将其设置为绝对定位，并使用`top`和`left`属性来定位其位置。同时，我们也为其设置了`width: 0`、`height: 0`以及`border`的宽度，这样就构成了三角形的上部。

最后，我们使用`.text`来设置文字，也设置为绝对定位，并使用`top`和`left`属性来定位文字的位置。我们将文字的颜色设置为白色，这样就可以在红色的三角形中显示出白色的文字。

通过上述代码，我们可以很容易地实现在三角形中添加文字的效果。这种方法适用于各种形状和大小的三角形，只需要调整相应的属性即可。