Inclided text inside half square box - css

Question

I have a css to draw a half square box
.box-tri {
width: 0;
height: 0;
border-right: 30px solid rgb(217, 224, 231);
border-top: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 30px solid rgb(217, 224, 231);
}
Now what i should do if i want to write a text parallel to the diagonal of the box but inside the box.

Answer 1

I added a child element to contain the text and rotated it with CSS transform:
<div class="box-tri">
<span>Label</span>
</div>
.box-tri {
width: 0;
height: 0;
border-right: 30px solid rgb(217, 224, 231);
border-top: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 30px solid rgb(217, 224, 231);
}
.box-tri span {
position:relative;
display:block;
transform: rotate(-45deg) translate(-15px, -18px);
-moz-transform: rotate(-45deg) translate(-15px, -18px);
-webkit-transform: rotate(-45deg) translate(-15px, -18px);
-webkit-backface-visibility: hidden;
outline: 1px solid transparent;
text-align:center;
line-height:1em;
width:60px;
height:1em;
overflow:hidden;
}
One caveat is that longer text does not work very well. My version truncates it.
WORKING EXAMPLE
In response to the other jsfiddle you found, I made the following changes to make the ribbon go from the top-right to the bottom-right:
.ribbon-wrapper-green {
...
top: -3px // removed
bottom: -3px; // added
}
.ribbon-green {
...
-webkit-transform: rotate(45deg); // removed
-moz-transform: rotate(45deg); // removed
-ms-transform: rotate(45deg); // removed
-o-transform: rotate(45deg); // removed
-webkit-transform: rotate(-45deg); // added
-moz-transform: rotate(-45deg); // added
-ms-transform: rotate(-45deg); // added
-o-transform: rotate(-45deg); // added
...
top: 15px // removed
top: 45px; // added
}
It's not perfect, but try tweaking those values to polish it.
WORKING EXAMPLE