如何隐藏溢出的元素但只在顶部？

Question

我只想隐藏顶部溢出的元素。在我的文档中，蓝色是背景img，而孩子是偏斜的div fiddle

<div class="parent">
    <div class=child>

    </div>
</div>

.parent {
  margin: 50px;
  height: 200px;
  width: 200px;
  background: red;
}
.child {
  height: 200px;
  width: 200px;
  background: blue;
      transform: skewY(20deg);
    -webkit-transform: skewY(20deg);
    -moz-transform: skewY(20deg);
    -o-transform: skewY(20deg);
}

Answer 1

需要添加另一个父overflow: hidden：

.ovh-parent {
  overflow: hidden;
}
.parent {
  margin: 50px;
  height: 200px;
  width: 200px;
  background: red;
  margin-top: 0;
}
.child {
  height: 200px;
  width: 200px;
  background: blue;
  transform: skewY(20deg);
  -webkit-transform: skewY(20deg);
  -moz-transform: skewY(20deg);
  -o-transform: skewY(20deg);
}

<div class="ovh-parent">
  <div class="parent">
    <div class=child>

    </div>
  </div>
</div>

这对你有用吗？请参阅下面的预览...

预览

Answer 2

您需要在父级之外添加另一个div来帮助隐藏溢出。

＆＃13;

＆＃13;

.overflow{
  margin: 20px;
  overflow: hidden;
  height: 300px;
  width: 200px;
  position: relative;
}
.parent {
  height: 200px;
  width: 200px;
  background: red;
  position: absolute;
  top: 0;
}
.child {
  height: 200px;
  width: 200px;
  background: blue;
  transform: skewY(20deg);
  -webkit-transform: skewY(20deg);
  -moz-transform: skewY(20deg);
  -o-transform: skewY(20deg);
}

＆＃13;

<div class="overflow">
  <div class="parent">
    <div class=child>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果你使用这个技巧，你不需要添加另一个祖先：

• 添加overflow: hidden以隐藏溢出
• 增加高度以避免剪切底部的溢出
• 添加负边距以防止上一步影响以下内容
• 使用背景图片而不是背景色。例如，使用渐变。
• 使用background-size设置背景图片的大小。不要重复背景。

.parent {
  overflow: hidden;
  margin: 50px;
  height: 300px;
  margin-bottom: -100px;
  width: 200px;
  background: linear-gradient(red, red) no-repeat;
  background-size: auto 200px;
  margin-top: 0;
}
.child {
  height: 200px;
  width: 200px;
  background: blue;
  transform: skewY(20deg);
  -webkit-transform: skewY(20deg);
  -moz-transform: skewY(20deg);
  -o-transform: skewY(20deg);
}

<div class="parent">
  <div class="child"></div>
</div>
Lorem ipsum