절대 위치가 오른쪽 모서리로 회전 된 요소

Question

오른쪽 구석에 위치하고 90도 회전 한 장바구니 탭을 만드는 방법을 알아 내려고합니다. 회전은 자연스럽게 위치를 혼합하지만 어쩌면 다른 포장지 등으로 포장하는 해결 방법이 있습니다 ....

너비를 정의 할 필요가없는 경우 추가 점. 구식 브라우저는 신경 쓰지 않아요

Answer 1

transform-origin 어때요? DEMO을 참조하십시오.

관련 CSS :

#box { 
    position: relative; 
} 
.bg { 
    right: 40px; /* same as height */ 
    height: 40px; 
    transform: rotate(-90deg); 
    transform-origin: 100% 0; 
    position: absolute; 
    line-height: 40px; /* same as height, for vertical centering */ 
} 

Answer 2

Ana's answer이 우수하고 올바른 방향으로 절 지적했다,하지만 난 당신이 명시 적 요소의 높이 라인의 높이와 위치를 설정하지 않고도 같은 효과를 얻을 수 실현

body { 
 
    margin: 0; 
 
} 
 

 
#box { 
 
    position: relative; 
 
} 
 

 
.bg { 
 
\t right: 0; 
 
\t padding: 1em; 
 
\t transform: rotate(-90deg) translate(0, -100%); 
 
\t transform-origin: 100% 0; 
 
\t position: absolute; 
 
\t background: #FF1493; 
 
}

<div id="box"> 
 
\t <div class="bg">   
 
\t \t <div class="txt">He's not the Messiah. He's a very naughty boy.</div> 
 
\t </div> 
 
</div>

: 단지 translate(0, -100%)을 설정하는 대신 - 당신은 이동하려는 좋은 측정을 위해

... 그리고 jsFiddle.