css - 具有背景的响应式倾斜 div

Question

我正在尝试制作一个倾斜 Angular div，但我无法使其响应，当屏幕变大时，布局完全中断

这是我目前所做的工作:https://codepen.io/anon/pen/eEbWvG

/* SCSS */

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.slantedDivA{
  position: relative;
  width: 100%;
  height: 400px;
  background: rgba(40, 40, 40, 1);
  box-sizing: border-box;
  color: #fff;
}

.container {
  position: relative;
  width: 100%;
  padding: 40px 0;
}

.container:after{
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  background: #fff;
  z-index: 1;
  top: 0;
  border-top: 1px solid green;
  right: 0;
  bottom: auto;
  left: 0;
  transform-origin: bottom left;
  transform: skewY(-4deg);
}

.test {
  height: 100%;
  width: 100%;
  background: url('http://via.placeholder.com/1366x768');
  background-size: cover;
  background-position: center;
}

<div class="slantedDivA">
  <div class="test"></div>
</div>

<div class="container">
  content
</div>

我得到了这个例子:http://prntscr.com/gf6yy5

我该怎么做并让它响应？只用 css 有可能吗？

Answer 1

在您的示例中，发生了很多事情，其中​​大部分对您试图达到的效果没有任何贡献。如果你只想切掉一个 div 的一 Angular ，我认为最简单的解决方案如下:有一个稍微倾斜的大盒子， overflow hidden 。它的子元素在相反的方向上倾斜了相同的量。我认为这比用白色大矩形隐藏底层内容更可靠。

例子:

.cutout {
  transform: skewY(10deg);
  overflow: hidden;
  width: 100%;
  height: 400px;
  border: 1px solid red;
}

.content {
  background: #eee;
  transform: skewY(-10deg);
  width: 200%;
  height: 200%;
}

<div class="cutout"><div class="content">text</div></div>