javascript - 如何将文字放在三 Angular 形div的底部？

我有以下部门：

div {
  width: 0px;
  height: 0px;
  border-left: 	126px solid transparent;
  border-right: 	126px solid transparent;
  border-bottom: 	126px solid #D30000;
  position: relative;
  left: 55%;
  top: 40px;
  display: table-cell;
  text-align:center;
  vertical-align: bottom;
}

<div>Triangle</div>

下面将三角形上的文本按如下方式对齐：

                    _Triangle_
                   /          \
                  /            \
                 /              \
                /                \
               /________________  \

我要做的是：

                       /\
                      /  \
                     /    \
                    /      \
                   /        \
                  / Triangle \

如何将文本推到三角形div的底部而不必将其包装在标记中？对我来说重要的是使用位置：相对；因为绝对不起作用。但是，即使我删除了position:relative；文本仍然不会到达div的底部。它会停留在顶部，三角形的顶角会被截断，使形状看起来像一个梯形。

最佳答案

可以使用伪元素来生成三角形。

div {
  text-align: center;
  width: 126px;
  margin: 126px auto;
  position: relative;
  color: white;
}
div:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: -1;
  border-left: 126px solid transparent;
  border-right: 126px solid transparent;
  border-bottom: 126px solid #D30000;
}

<div>Triangle</div>