CSS Triangle bottom right of parent div - html

Question

I have a parent div that contains a child that is aligned to the bottom right corner of the parent. The child has text within it that I am trying to get to display correctly.
As it is currently set up, the contents of the child has placed the text to the right side instead of within.
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>
Fiddle:
http://jsfiddle.net/vh7m8gey/1/
Output:
I am trying to get the $25 to be centered in the black triangle that is on the bottom right of the child.
How should i approach this?

Answer 1

I created a container for the amount with absolute position right 3px and bottom -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

Look at this. You need to insert for example span inside gradeTriangle, and position It using css.
.gradeTriangle span {
position: absolute;
bottom: -40px;
right: 0px;
}
HTML:
<div class="container">
<div class="gradeTriangle">
<span>$25</span>
</div>
</div>

Answer 3

You can easily create the triangle as background of the main container:
.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

Need to add some style to get the design, added the following style for 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;
}
please check the sample code.