<html> <head> <style> body { height: 4000px; margin: 0; } #outer { margin: 200px; height: 700px; width: 300px; transform: rotate(45deg); -webkit-transform: rotate(45deg); overflow: hidden; } #inner { height: 700px; background-image: radial-gradient(farthest-corner at center, blue, black); background-size: 300px 300px; background-position: 200px 200px; background-color: lime; background-repeat: no-repeat; background-attachment: fixed; } </style> </head> <body> <div id="outer"> <div id="inner"> </div> </div> </body> </html>