css三角形里面放数字

CSS可以做很多炫酷的效果，其中之一就是实现三角形的效果。在三角形里面放入数字也是一种非常实用的效果，下面我们就来看看如何实现。

.triangle {
    width: 0;
    height: 0;
    border-top: 20px solid transparent; 
    border-bottom: 20px solid transparent; 
    border-right: 20px solid #007bff; 
    position: relative;
}
.triangle:after {
    content: attr(data-count); /* 将data-count的值放到三角形中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
} 

首先，我们需要一个具有三角形形状的元素。这里我们使用了CSS的border属性，将三角形边框设置为20px，颜色为#007bff。由于三角形是梯形，我们只需要设置其中三个边框即可。此外，我们设置了该元素的位置为相对定位，方便后续使用绝对定位进行数字的放置。

接下来，我们添加一个伪元素，并使用attr()属性将data-count的值放置在该元素中。attr()属性可以用于获取HTML元素中的属性值，并在CSS中使用。我们将它放在:after伪元素中，是为了让数字可以放置在三角形的中心。我们将数字相对于三角形进行绝对定位，并使用translate()进行调整。此外，我们还设置了数字的颜色和大小。

最后，在HTML中，我们只需要在对应的元素中添加data-count属性，并将需要显示的数字赋值给它即可。例如：

<div class="triangle" data-count="7"></div> 

现在，我们就可以很轻松地实现一个三角形里面放数字的效果了！