offset-path-shape-shape-002.html (1006B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Motion Path test: <basic-shape> shape() function with padding-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 top: 50px; 12 left: 50px; 13 position: relative; 14 width: 600px; 15 height: 400px; 16 padding: 50px; 17 box-sizing: content-box; 18 } 19 #box { 20 width: 100px; 21 height: 100px; 22 background-color: green; 23 offset-path: shape(from 50px 10%, 24 hline by calc(100% - 100px), 25 vline to calc(100% - 50px), 26 hline to 50px, 27 close) 28 padding-box; 29 offset-distance: 40%; 30 border-radius: 50% 50% 0 0; 31 } 32 </style> 33 34 <div id="outer"> 35 <div id="box"></div> 36 </div>