центрированный поворот текста в треугольнике

У меня есть следующее JSfiddle.центрированный поворот текста в треугольнике

Это HTML-разметка.

<div id="container"> 
    <img id="rotate" height="80" width="80" src="http://i.imgur.com/dEM0KGG.png" /> 
    <span id="text">Download</span> 
</div>

Вот и CSS.

#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; 
}

Я хочу разместить текст, как показано на рисунке. Проблема, с которой я сталкиваюсь, заключается в том, что текст может изменяться динамически, и если я использую ту же позицию, он не отображается должным образом.

Есть ли способ, которым я могу позиционировать его динамически на основе ширины текста/контейнера? Также может измениться ширина контейнера. Прямо сейчас его 80 x 80, но может быть 50 x 50. Как я могу поместить его?

источник

2014-02-13 nyfer

Почему бы не вращать весь элемент, а не изображение и текст отдельно? – Tzach

@Tzach спасибо чувак. я сделал то, что вы сказали, и разместил его внутри div. он подходит. – nyfer

Отлично. Я отправил его в качестве ответа. – Tzach

Попробуйте повернуть весь #container элемент, вместо изображения и текста в отдельности.

источник

2014-02-14 10:59:07 Tzach

Вы не можете изменить размер шрифта динамически, что вы можете сделать, это использовать немного js для решения вашей проблемы!

<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);

просто добавить этот код в голову тег

источник

2014-02-13 09:27:09

если он не работает, добавьте две строки выше setInterval: document.getElementById ("container"). Style.width = "80px"; document.getElementById ("container"). Style.height = "80px"; –

центрированный поворот текста в треугольнике

ответ

Смежные вопросы