html - 父div右下角的CSS三角形

Question

我有一个父 div，其中包含一个与父级右下角对齐的子级。孩子里面有我试图正确显示的文本。

按照目前的设置，子项的内容已将文本放置在右侧而不是内部。

CSS：

.container {
  background-color: red;
  height: 200px;
  width: 400px;
  position:relative;
}  

.gradeTriangle{
    width: 0px;
    height:0px;
    border-bottom: 50px solid #000;
    border-left: 50px solid transparent;
    bottom: 0;
    right: 0;
    position: absolute;
    color: green
}

HTML：

<div class="container">
  <div class="gradeTriangle">
    $25
  </div>
</div>

小提琴：http: //jsfiddle.net/vh7m8gey/1/

输出：

我试图让$25位于孩子右下角的黑色三角形中居中。

我应该如何处理这个？

标签： htmlcss

Answer 1

我为绝对位置右侧 3px 和底部 -45px 的数量创建了一个容器。

.container {
  background-color: red;
  height: 200px;
  width: 400px;
  position:relative;
}  

.gradeTriangle{
    width: 0px;
    height:0px;
    border-bottom: 50px solid #000;
    border-left: 50px solid transparent;
    bottom: 0;
    right: 0;
    position: absolute;
    color: green
    }
.amountContainer{
    position:absolute;
    padding:1%;
    bottom:-45px;
    right:3px;
}

<div class="container">
  <div class="gradeTriangle">
    <div class="amountContainer">$25</div>
  </div>
</div>