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/