一个很有意思的题目。如何不使用 overflow: hidden 实现 overflow: hidden？
CSS 中 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。而 overflow: hidden 则会将超出容器范围内的内容剪裁。
控制 overflow: hidden 的方向
这源自一个实际的需求，在某个需求当中，要求容器内的内容，在竖直方向上超出容器会被裁剪，而在水平方向上超出容器，则不会被裁剪。类似这样：
有意思，第一个想到的解法当然是在上述黄色背景元素本身之外再套用一层父元素，然后父元素才是实际设置 overflow: hidden 的元素，父元素的范围就是实际才是控制是否裁剪的范围。类似这样：
实际的父元素才是设置了 overflow: hidden 的元素。
当然，如果实际情况就是这么简单，也没什么问题。
但是如果元素处于一个复杂的布局流内，那么可能就没有那么多的空间，让我们再去包裹一层父容器了：
类似上图的情况，还是中间黄色元素，要求只有竖直方向超出裁剪。此时，包裹父元素不再那么容易施展。所以，我们需要另辟蹊径。
利用 clip-path 进行裁剪
好的，这会可以进入正文了。CSS 中，除了 overflow: hidden，还是有其它属性也可以实现超出容器区域进行裁剪的。clip-path 便是其中翘楚。
使用 clip-path，我们可以方便的控制任意方向上的裁剪。上述的需求则可以这样解决：
<div> <div></div> </div>