Make responsive an image from another one

Question

I would like to center an arrow on a wheel.

The pointer should always point the little blank space between 100 and 30.

I've started with this code:

@media only screen and (min-width: 1200px) {
    #pin {
        left: 46%;
        background: green;
    }
}
@media only screen and (max-width:1100px) {
    #pin {
        left: 45%;
        background: blue;
    }
}
@media only screen and (max-width:769px) {
    #pin {
        left: 44.7%;
        background: yellow;
    }
}

You could find a JS Fiddle here: https://jsfiddle.net/jb386rfn/

The problem is I need to have a lot of CSS rules for each pixel.

It's very important as the pointer should point the right price.

Thanks for any help.