<!DOCTYPE html> <html> <head> <title>CSS Motion Path: ray paths</title> <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property"> <link rel="match" href="offset-path-ray-005-ref.html"> <meta name="assert" content="This tests that ray() generates a rotation and translation."> <style> #container { width: 200px; height: 200px; } #target { position: relative; left: 120px; top: 160px; width: 100px; height: 50px; background-color: lime; transform-origin: 0px 0px; offset-path: ray(135deg farthest-corner); offset-distance: 100%; } </style> </head> <body> <div id="container"> <div id="target"></div> </div> </body> </html>