父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置于孩子右下角的黑色三角形的中心。

我应该如何处理？

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>

Answer 2

看看这个。例如，您需要在gradeTriangle中插入跨度，并使用css对其进行定位。

.gradeTriangle span {
    position: absolute;
    bottom: -40px;
    right: 0px;
}

HTML：

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

Answer 3

您可以轻松地将三角形创建为主容器的背景：

.container {
  background: 
    linear-gradient(to bottom right,transparent 49.8%,#000 50%) bottom right/50px 50px no-repeat,
    red;
  height: 200px;
  width: 400px;
  position: relative;
}

.gradeTriangle {
  bottom: 5px;
  right: 5px;
  position: absolute;
  color: green
}

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

Answer 4

需要添加一些样式来获得设计，为gradeTriangle添加了以下样式

.gradeTriangle{ 
position:absolute;
right:0; 
bottom:0;
width: 60px; 
height: 60px;
border-bottom: solid 30px black;
border-right: solid 30px black; 
box-sizing: border-box; 
color:#fff;
border-left: solid 30px transparent; 
border-top: solid 30px transparent;
}

请检查sample code。