CSS3 Shapes实现列表环绕iPhone X刘海头

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, 0150px,16px154px,30px166px,30px314px,16px326px, 0330px, 0 0);transition:shape-outside .15s;}.liuhai{width:24px;height:180px;background:url(liu.png) no-repeat left center;position:absolute;margin-top:150px;}.contentul{list-style:none;padding:0;margin:0;}.contentli{border-bottom:1pxsolid#eee;padding:.5em;}

HTML代码：

• 为了防止看花眼
• 我就手动敲下面的文字
• 原本我偷懒
...
• 理论上还可以使用CSS region实现
• 但没有这个方法容易理解

JS代码：

vareleShape=document.getElementById('shape');vareleBox=document.getElementById('box');//保证shape元素高度足够eleShape.style.height=eleBox.scrollHeight+'px';varfunShape=function(){varscrollTop=eleBox.scrollTop;//滚动偏移应用在shape-outside上varshapeOutside='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();

转载：http://www.zhangxinxu.com/study/201709/css3-shapes-around-iphone-x.html

           http://www.zhangxinxu.com/wordpress/2017/09/css-shapes-outside-iphone-x-head/