offset-path-shape-shape-003.html (883B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Motion Path test: <basic-shape> shape() function with content-box</title> 4 <link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape"> 5 <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> 6 <link rel="match" href="offset-path-shape-shape-001-ref.html"> 7 <meta name="assert" content="This tests that shape() generates a rotation and translation."> 8 9 <style> 10 #outer { 11 width: 600px; 12 height: 400px; 13 border: 50px solid transparent; 14 } 15 #box { 16 width: 100px; 17 height: 100px; 18 background-color: green; 19 offset-path: shape(from 50px calc(-10% + 90px), 20 hline by 100%, 21 vline to calc(100% + 50px)) 22 content-box; 23 offset-distance: 80%; 24 border-radius: 50% 50% 0 0; 25 } 26 </style> 27 28 <div id="outer"> 29 <div id="box"></div> 30 </div>