Corner Ribbon in Responsive Layout

Question

JSFiddle

Im trying to make a corner ribbon for a responsive layout.

I've used the following to position it:

position: absolute;
top: 10px;
left: -100px;

I have the ribbon in place, my issue occurs when the user resizes the screen, how can I always get it so that the ribbon sites in the corner? i've tried playing around with different percentage offsets but it's hit and miss.

Answer 1

don't use width:100% for your ribbon

fiddle

.ribbon{
    position: absolute;
    background: black;
    color: white;
    transform: rotate(-45deg);
    text-align: center;
    top: 10px;
    left: -75px;        /* !!! */
    width:200px;        /* !!! */
}