关键的CSS代码如下：.g-container{width:200px;height:200px;clip-path:polygon(-1000%0,1000%0,1000%100%,-1000%100%);}这里clip-path:polygon()用于裁剪一个矩形区域，裁剪-路径支持负坐标特性，设置裁剪起点远离坐标可以画出大矩形。示意图：这样，我们就可以在正常的布局流程中，在当前容器大小范围内绘制出任意想要的overflow:hiddenrange。可以点进Demo试试：CodePen--Clip-path溢出链接：https://codepen.io/Chokcoco/pen/ZEpRqME再举两个例子：{//切出overflow:hidden两边，向上和downTheareanotoverflow:hiddenclip-path:polygon(0-1000%,100%-1000%,100%1100%,01100%);//裁掉overflow:hidden的左边，上面，右边，和底部没有溢出：隐藏区域clip-path:polygon(100%0,100%1000%,01000%,00);}当然上面代码中的1000%很灵活，大家可以自己控制，只要够用就行。然后是非溢出，剪辑路径裁剪方法。通过上面的一个小例子，我们知道overflow、clip-path是可以裁剪区域的。那么除了这两个之外，CSS中还有没有可以进行区域裁剪的元素呢？是的，还有另一个有趣的元素，那就是——包含。contain属性允许我们指定特定的DOM元素及其子元素，使它们独立于整个DOM树结构。目的是使浏览器能够只重绘和重新排列某些元素，而不必每次都以整个页面为目标。contain:paintforcontentclipping让我们详细谈谈contain:paint。一个带有contain:paint的元素设置开启了布局限制，即该元素的子元素不会显示在该元素的边界之外。contain:paint属性的目的是为了加快页面的渲染速度，而不是渲染非必要区域的元素。因此，如果一个元素在屏幕外或以其他方式设置为不可见，则不会呈现其不可见的后代。看例子：.g-container{contain:paint;}CodePenDemo--contain:paintDemo地址：https://codepen.io/Chokcoco/pen/KKwmgmNcontain:sideeffectofpaint的初衷contain:paint是为了提高页面的渲染效果，裁剪到容器外的元素不渲染。但是使用它会产生一些副作用：它会生成一个新的属于自己的层叠上下文（Itbecomesastackingcontext），即会改变其子元素的绝对定位和固定定位的基础；itwillbecomethenewItbecomesanewformattingcontext(Itbecomesanewformattingcontext)，也就是说，这意味着元素外部的布局将不再影响其子元素；具体可以看这篇文章——CSSContainmentinChrome52地址：https://developers.google.com/web/updates/2016/06/css-containment先解释一下第一点，很有意思，它会生成一个新的自己的层叠上下文，即会改变position:fixed元素的base，这会让position:fixed的元素不再相对于视口定位，而是相对于元素定位。也就是说，它退化为position:absolute。当然，这不是本文的重点。我已经提供了一个Demo，这里就不再赘述了。Demo地址：https://codepen.io/Chokcoco/pen/bGwjqep综上所述，本文提供了3种实现超出容器范围裁剪的方法：overflow:hiddenclip-pathdrawstheclippingareacontain:paintdoesnotdrawContentoutsidethescopeoftheelement这里是后面三个例子的demo：CodePenDemo--OverflowHiddenInCSS地址：https://codepen.io/Chokcoco/pen/XWjYZGd当然，它们之间还是有一些区别的：overflow:hidden和contain:paint会创建一个BFC，而clip-path不会，它只是clippingcompatibility的区别所以也就是说，CSS不只是overflow:hidden来实现overflow:hidden，很多情况下，它可以灵活使用。铲子测试的另一个有趣的地方是一行CSS代码的魅力中提到了CSSBattle。本站的核心玩法是：官方给出了一个图形，在给定的400x300画布上，可以用越短的代码实现它，得分越高。上次讲了一道用一行CSS代码实现的题。今天我们来看第二个问题：地址：https://cssbattle.dev/play/2如何用最短的代码实现？想一想我们今天谈到的clip-path。首先，我们使用这段代码生成这样一个图形：