offset-path-shape-circle-004-ref.html (580B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Motion Path test reference: <basic-shape> circle() path with offset-distance and offset-anchor</title> 4 <link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> 5 6 <style> 7 #outer { 8 top: 100px; 9 left: 100px; 10 position: relative; 11 width: 400px; 12 height: 400px; 13 } 14 #box { 15 background-color: green; 16 position: relative; 17 transform: translate(200px, 160px); 18 border-radius: 50% 50% 0 0; 19 width: 100px; 20 height: 100px; 21 } 22 </style> 23 24 <div id="outer"> 25 <div id="inner"> 26 <div id="box"></div> 27 </div> 28 </div>