vị trí tuyệt đối được xoay phần sang góc phải

Question

Tôi đang cố gắng tìm ra cách tạo tab giỏ hàng sẽ được đặt ở góc bên phải và cũng xoay 90 độ. Xoay vòng tự nhiên trộn lẫn vị trí nhưng có thể có một cách giải quyết khác để gói vào các trình bao gói khác nhau, v.v.

Điểm bổ sung nếu không cần xác định chiều rộng. Tôi không quan tâm đến các trình duyệt cũ hơn

Answer 1

Làm thế nào để sử dụng transform-origin? Xem DEMO.

CSS liên quan:

#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 là tuyệt vời và chỉ cho tôi đi đúng hướng, nhưng tôi nhận ra rằng bạn có thể đạt được tác dụng tương tự mà không cần phải thiết lập một cách rõ ràng chiều cao, line-height và vị trí cho phần tử bạn muốn di chuyển - thay vào đó, chỉ cần đặt translate(0, -100%):

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>

... và jsFiddle để có biện pháp tốt.