JSFiddle - React, Tailwind, and code Playground

HTML

<body class="diagonal-background">
    <ul>
        <li>example 1</li>
        <li>example 2</li>
        <li>example 3</li>
        <li>example 4</li>
        <li>example 5</li>
    </ul>
</body>

CSS

.original-background ul{    background:url(https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg) repeat;
}

.diagonal-background ul:before {
    content:"";
    background:url(https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg) repeat;
    width:200%;
    height:200%;
    position:absolute;
    top:0px;
    left:0px;
    z-index:-1;
    -webkit-transform:rotate(-13deg) translate(10px,-220px); 
    -moz-transform:rotate(-13deg) translate(10px,-220px); 
    -o-transform:rotate(-13deg) translate(10px,-220px); 
    -ms-transform:rotate(-13deg) translate(10px,-220px); 
}

ul{overflow:hidden;width:200px;height:200px;position:relative;}

JavaScript

document.onclick = function(){
    if(document.body.className == "original-background"){
        document.body.className = "diagonal-background";
    }
    else{
        document.body.className = "original-background"
    }
    
}