Question

我遇到的问题是：溢出：隐藏似乎并没有在倾斜的容器上工作。我有一个问题，需要外部容器上的盒子阴影，内部图像延伸到外部容器的顶部和底部。

出于某种原因，将溢出：隐藏在.skew容器上并不会像预期的那样隐藏图像的顶部。

.skew-container {
   position: relative;
}

.skew-container:before {
  -webkit-transform: skewY(-2.3deg);
  -moz-transform: skewY(-2.3deg);
  -ms-transform: skewY(-2.3deg);
  -o-transform: skewY(-2.3deg);
  transform: skewY(-2.3deg);
  position: absolute;
  outline: 1px solid transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  top: 0;
  content: "";
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

.skew-container:after {
  content: "";
  display: block;
  position: relative;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 10px;
  outline: 1px solid transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotate(-2.3deg);
  -webkit-box-shadow: inset 0px -9px 29px -13px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px -9px 29px -13px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px -9px 29px -13px rgba(0, 0, 0, 0.75);
}

.level-container {
  background-color: green;
}

我附上了一个jsfiddle：

https://jsfiddle.net/eilawen/yy7pL7by/

如果有人能提供任何解决方案或替代解决方案，我们将不胜感激。我尝试过使用clip-path但不幸的是遇到了应用盒子阴影以及将倾斜的容器放在顶部和底部彼此相邻的问题。

提前致谢。

溢出问题：隐藏变换：skewY

0 个答案: