使用overflow-y:hidden或overflow-x:hidden只隐藏元素的一侧

Question

标题几乎提出了这个问题，但我知道使用overflow-y: hidden和overflow-x: hidden可以隐藏元素的顶部和底部或左侧和右侧，但有没有办法使用这些选择器只隐藏一侧。

我特别感兴趣的是隐藏溢出的div的底部，而不是顶部

如果没有，是否有其他CSS唯一的方法来实现这种期望的效果？

需要这样做是有正当目的的，我想看看是否有标准的方法。

稍微解释一下，我只控制幻灯片放映的CSS，我需要将幻灯片放映div内的元素推到div上方，但当我这样做时，overflow: hidden值会切断这个推高的div。当然，我可以完全删除overflow: hidden，但这并不能成为一个很好的幻灯片！

小提琴包括在下面：

https://jsfiddle.net/ejhyz7t3/

Answer 1

下面的jsfiddle基于问题中的示例，提供了使用clip:仅切掉底部边缘的预期效果

https://jsfiddle.net/ejhyz7t3/2/

完整代码复制如下以供参考：

HTML

<div class="outer-container">
   <div class="inner-container">
   </div>
</div>

CSS

.outer-container {
  background: red;
  height: 100px;
  margin-top: 100px;
  width: 150px;
  padding-left: 50px;
}
.inner-container {
  background: green;
  height: 200px;
  width: 100px;
  transform: translateY(-50px);
  position: absolute;
  clip: rect(0, 100px, 150px, 0);
}

Answer 2

我也遇到过类似的问题，我有一个可拖动的div，我想向右/向下溢出，但不想从上/左溢出。我通过调整z索引解决了这个问题。容器div到z索引：0px；可拖动到z索引：500px；以及顶部和左侧(菜单(中的div到z索引：1000px；。这有效地夹住了可拖动的层，使其可以朝着我想要的方向溢出。

Answer 3

使用clip-path对我有用。clip似乎已被弃用。

仅隐藏底部：

element.style {
    clip-path: polygon(0 -100%, 100% -100%, 100% 100%, 0% 100%);
}

Answer 4

.mydiv {  
    clip: rect(-100px, -100px, auto, -100px);  
}

将剪辑rect的底部设置为auto剪辑(如overflow: hidden(。-100px值是任意选择的，以留出一些溢出空间。