Creating triangular bootstrap badges - html

Question

I'm trying to create triangular bootstrap badge with text at center of the triangle.
Code for normal badge: https://jsfiddle.net/wqrry89r/
Code for triangular bootstrap badge: https://jsfiddle.net/wqrry89r/1/
My CSS code is:
.badge-triangle {
left: 10px;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #777;
background-color: #fff;
}
.badge-triangle:after {
left: 10px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #FFF;
left: 57px;
position: absolute;
top: 38px;
content: '';
}
How can I make that bootstrap badge triangular and make text go to center of triangle?

Answer 1

.badge {
position: absolute;
right: 0;
top: 0;
border-top: 90px solid #CC0000;
border-left: 90px solid transparent;
}
.mask-t {
color: #fff;
position: absolute;
width: 100px;
height: 100px;
right: 0px;
top: 0px;
}
.mask-t strong {
display: block;
width:100%;
height:100%;
line-height: 100px;
text-align: center;
-webkit-transform: rotate(45deg) translate(0, -25%);
-moz-transform: rotate(45deg) translate(0, -25%);
-ms-transform: rotate(45deg) translate(0, -25%);
-o-transform: rotate(45deg) translate(0, -25%);
transform: rotate(45deg) translate(0, -25%);
}
<div class="badge">
</div>
<div class="mask-t">
<strong>Sale!</strong>
</div>

Answer 2

Although right answer has already been provided but just want to give another thought.
This is using normal CSS (not bootstrap badge) but modifying actual code only.
Here, I have considered "my-triangle" as main triangle.
HTML changes:
<div class="row">
<div class="container my-triangle">
<span class="badge-triangle"></span>
<span class="new-text">N.T.A</span>
</div>
</div>
CSS changes:
.my-triangle{
position:relative;
top:50px;
left:100px
}
.badge-triangle {
width: 0;
height: 0;
position:absolute;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #777;
}
.badge-triangle:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #fff;
left: -50px;
position: absolute;
top: 30px;
content: '';
}
.new-text{
position:absolute;
top:50px;
left:100px;
transform:translateX(-50%);
}
Please check this fiddle.
https://jsfiddle.net/wqrry89r/3/