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代碼：
- 為了防止看花眼
- 我就手動(dòng)敲下面的文字
- 原本我偷懶 ...
- 理論上還可以使用CSS region實(shí)現(xiàn)
- 但沒(méi)有這個(gè)方法容易理解
JS代碼：
vareleShape=document.getElementById('shape');vareleBox=document.getElementById('box');//保證shape元素高度足夠eleShape.style.height=eleBox.scrollHeight+'px';varfunShape=function(){varscrollTop=eleBox.scrollTop;//滾動(dòng)偏移應(yīng)用在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;};//滾動(dòng)時(shí)候?qū)崟r(shí)改變shape形狀eleBox.addEventListener('scroll',funShape);funShape();
轉(zhuǎn)載：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/
