center align rotated text in a triangle - css

Question

I have this following JSfiddle.
This is the HTML markup.
<div id="container">
<img id="rotate" height="80" width="80" src="http://i.imgur.com/dEM0KGG.png" />
<span id="text">Download</span>
</div>
Here is the CSS too.
#container {
position:absolute;
height:80px;
width:80px;
left:0px;
top:0px;
overflow:hidden;
z-index:2147483647;
}
#rotate {
position:absolute;
height:113px;
width:113px;
-webkit-transform:rotate(-45deg);
-webkit-transform-origin:100% 0%;
-moz-transform:rotate(-45deg);
-moz-transform-origin:100% 0%;
-ms-transform:rotate(-45deg);
-ms-transform-origin:100% 0%;
-o-transform:rotate(-45deg);
-o-transform-origin:100% 0%;
transform:rotate(-45deg);
transform-origin:100% 0%;
background:#3868D9;
right:0px;
z-index:9001;
}
#text {
position:absolute;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
z-index:9001;
top:35px;
right:0px;
}
I want to place a text like how I have shown. The problem I am facing with is that the text can change dynamically and if I use the same position it doesn't display properly.
Is there any way I can position it dynamically based on the width of the text/container?
Also the width of the container can change. Right now its 80 x 80 but can be 50 x 50. How can I position it?

Answer 1

Try rotating the entire #container element, instead of the image and the text separately.

Answer 2

you can't resize the font dynamically, what you can do is to use a little js to solve your problem!
<script type="text/javascript">
setInterval(function(){
var cont=document.getElementById("container").style;
if(cont.width!="80px"){
document.getElementById("text").style.fontSize="9px";
document.getElementById("text").style.top="50%";
}
else{
document.getElementById("text").style.fontSize="16px";}
},1);
just add this code to the head tag