CSS代码：

.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(liu.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;

}

HTML代码：

<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>

        </ul>

    </div>

</div>

JS代码：

var eleShape = document.getElementById('shape');

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();