Question

我有以下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.我如何定位它？

Answer 1

尝试旋转整个#container元素，而不是单独旋转图像和文本。

Answer 2

你无法动态调整字体大小，你可以做的就是用一点j来解决你的问题！

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

只需将此代码添加到head标记

即可

中心将旋转的文本对齐成三角形

2 个答案: