offset-path-ray-001.html (878B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Motion Path: ray paths</title> 5 <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> 6 <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property"> 7 <link rel="match" href="offset-path-ray-001-ref.html"> 8 <meta name="assert" content="This tests that ray() generates a rotation and translation."> 9 <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-10"> 10 <style> 11 #target { 12 position: absolute; 13 left: 300px; 14 top: 100px; 15 width: 300px; 16 height: 200px; 17 background-color: lime; 18 transform-origin: 0px 0px; 19 offset-path: ray(135deg closest-side); 20 offset-distance: 20px; 21 offset-position: auto; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="target"></div> 27 </body> 28 </html>