offset-path-ray-020.html (817B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Motion Path: ray paths</title> 5 <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property"> 6 <link rel="match" href="offset-path-ray-007-ref.html"> 7 <meta name="assert" content="This tests ray() in a flex box."> 8 <style> 9 #container { 10 display: flex; 11 width: 400px; 12 height: 300px; 13 } 14 #target { 15 position: relative; 16 left: 200px; 17 top: 100px; 18 width: 100px; 19 height: 50px; 20 background-color: lime; 21 transform-origin: 0px 0px; 22 offset-path: ray(180deg sides); 23 offset-distance: 100%; 24 offset-position: auto; 25 } 26 </style> 27 </head> 28 <body> 29 <div id="container"> 30 <div id="target"></div> 31 </div> 32 </body> 33 </html>