How to make a "span" across the diagonal of a web-page?

[FlatAssembler]

So, I have tried to add the "SOLD!" sign across the diagonal of my house-selling web-page. Here is what I tried.
HTML:

Code:

<span id="prodano">PRODANO! - SOLD!</span>

CSS:

Code:

#prodano
{
    background-color:#FF7777;
    color:#000077;
    font-size:36px;
    line-height:50px;
    position:fixed;
    display:none; /*Has not yet been sold!*/
    text-align:center;
}

JavaScript:

Code:

document.body.onresize=function()
    {
        var content=document.getElementById("content");
        var sirinaProzora=(window.innerWidth || //Moderni internetski preglednici
                            document.documentElement.clientWidth || //Internet Explorer 8
                            document.body.clientWidth //Internet Explorer 6
                            );
        var visinaProzora=(window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight);
        content.style.left=sirinaProzora/2-content.clientWidth/2+"px";
        var prodano=document.getElementById("prodano");
        var sirinaNatpisaProdano=Math.sqrt(Math.pow(sirinaProzora,2)+Math.pow(visinaProzora,2))+2*50;
        prodano.style.width=sirinaNatpisaProdano+"px";
        var nagibNatpisaProdano=Math.atan2(visinaProzora,sirinaProzora);
        prodano.style.transform="rotate("+nagibNatpisaProdano+"rad)";
        var yKoordinataNatpisa=(visinaProzora/2-Math.cos(nagibNatpisaProdano)*50);
        prodano.style.top=yKoordinataNatpisa+"px";
        prodano.style.left=-(Math.sin(nagibNatpisaProdano)*yKoordinataNatpisa)+"px";
    }
window.onresize=document.body.onresize;
window.onload=document.body.onresize;

I haven't yet managed to sell my house. My mother keeps insisting that the real price is 45'000 euros, even though I think houses like that are usually sold at around 30'000 euros.
But, anyway, what I have done now works in Firefox when run on my laptop, however, for some reason, it moves away from the diagonal as I resize the window. Can you find the error?
You can see my house-selling web-page here (the "display" of that "span" is set to "none" instead of to "block").

[Abaddon_ire]

I am so glad I no longer have to deal with that nonsense. Back in the day, we used to have an initial script that determined the user-agent and version which then determined page content. This script grew and grew as versions of the commonest browsers proliferated. Eventually, we ditched the lot as unnecessary, and went with bog standard HTML for the user interface.

Alas, that variability will always remain the achilles heel of interpreted languages.

If it were me, I would have a handy copy of the lead image with a diagonal "SOLD" banner all prepped to swap in whenever. It would be a far more efficient use of time and eliminates all of the messing about with script compatibility. But then, I am old and not a little cynical.

[FlatAssembler]

Alas, that variability will always remain the achilles heel of interpreted languages.

I don't care too much about compatibility with obsolete browsers, IE11 is the lowest I care about. I would like it to be legible in older browsers, that's all. I also think that the solution would result in the "SOLD" being in the middle of the screen in old browsers (which don't support CSS transform). I care much more about the layout not breaking when somebody resizes the screen or on the mobile devices.

I would have a handy copy of the lead image with a diagonal "SOLD" banner all prepped to swap in whenever

I am not sure what you mean. If I insert a partly-transparent PNG on top of the web-page, the viewers won't be able to select neither the text in that PNG nor the text on the web-page.

[Abaddon_ire]

Alas, that variability will always remain the achilles heel of interpreted languages.

I don't care too much about compatibility with obsolete browsers, IE11 is the lowest I care about. I would like it to be legible in older browsers, that's all. I also think that the solution would result in the "SOLD" being in the middle of the screen in old browsers (which don't support CSS transform). I care much more about the layout not breaking when somebody resizes the screen or on the mobile devices.

I would have a handy copy of the lead image with a diagonal "SOLD" banner all prepped to swap in whenever

I am not sure what you mean. If I insert a partly-transparent PNG on top of the web-page, the viewers won't be able to select neither the text in that PNG nor the text on the web-page.

Simple. Prepare an image of the property with a honking great "sold" banner on it . When the property is actually sold, swap the images. I don't know how hard that is to do. Seems to me like something any moron can do. Seems to me like shedloads of morons can mange to do that all the time.

Somehow, it is beyond your skill set. For some reason. 

Do you need me to give you a worked example?

[FlatAssembler]

Prepare an image of the property with a honking great "sold" banner on it .

Well, I have next to no GIMP skills, so that will take quite some time. Besides, I don't think it will look as nice.

Seems to me like something any moron can do.

Well, I am studying computer science at the university, and I am studying a lot of it by myself, yet I don't know on the top of my head how I'd do that.

[FlatAssembler]

Anyway, here is the solution.

[Abaddon_ire]

Anyway, here is the solution.

Super, but so what. You could have had the same result in seconds in photoshop. Plus then, you wouldn't have to consider those awkward cross compatibility problems, nor the additional script overhead, nor the problem with so many people disabling javascript in this age of nigerian princes.