<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box { max-width: 414px; height: 480px; border: solid #000; margin: auto; overflow: auto; } .shape { float: left; width: 30px; height: 340px; /*shape-outside: polygon(0 0, 0 150px, 16px 154px, 30px 166px, 30px 314px, 16px 326px, 0 330px, 0 0);*/ transition: shape-outside .15s; } .liuhai { width: 24px; height: 180px; background:url(img/liuhai.png) no-repeat left center; position: absolute; margin-top: 150px; } .content ul { list-style: none; padding: 0; margin: 0; } .content li { border-bottom: 1px solid #eee; padding: .5em; } </style> </head> <body> <div id="box" class="box"> <i id="shape" class="shape"></i> <i class="liuhai"></i> <div class="content"> <ul> <li>为了防止看花眼</li> <li>我就手动敲下面的文字</li> <li>原本我偷懒</li> ... <li>理论上还可以使用CSS region实现</li> <li>但没有这个方法容易理解</li> <li>但没有这个方法容易理解</li> <li>但没有这个方法容易理解</li> <li>但没有这个方法容易理解</li> <li>但没有这个方法容易理解</li> <li>但没有这个方法容易理解</li> <li>但没有这个方法容易理解</li> <li>但没有这个方法容易理解</li> <li>但没有这个方法容易理解</li> <li>但没有这个方法容易理解</li> <li>但没有这个方法容易理解</li> <li>但没有这个方法容易理解</li> </ul> </div> </div> <script type="text/javascript"> window.onload=function(){ var eleShape = document.getElementById('shape'); // console.log(eleShape) var eleBox = document.getElementById('box'); // 保证shape元素高度足够 eleShape.style.height = eleBox.scrollHeight + 'px'; var funShape = function () { var scrollTop = eleBox.scrollTop; // 滚动偏移应用在shape-outside上 var shapeOutside = 'polygon(0 0, 0 '+ (150 + scrollTop) +'px, 16px '+ (154 + scrollTop) +'px, 30px '+ (166 + scrollTop) +'px, 30px '+ (314 + scrollTop) +'px, 16px '+ (326 + scrollTop) +'px, 0 '+ (330 + scrollTop) +'px, 0 0)'; eleShape.style.shapeOutside = shapeOutside; }; // 滚动时候实时改变shape形状 eleBox.addEventListener('scroll', funShape); funShape(); } </script> </body> </html>