Question

我正在尝试制作一个倾斜的角度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的角落，我认为最简单的解决方案如下：有一个大的盒子，有一点隐藏溢出的倾斜。它的子元素在相反方向上倾斜相同的量。我认为这比隐藏底层内容的大白色矩形更可靠。

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是我的jsFiddle。

倾斜的div是敏感的。在我的例子中，我使用了像:after这样的伪元素。 :)

＆＃13;

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.slantedDivA{ width: 100%; 
text-align: center; 
font-size: 36px; 
padding: 10% 25px; 
background: gray; 
color: #fff; 
position: relative; }

.slantedDivA:after{ content: "";
border-left: 99.58vw solid gray;
border-top: 20px solid transparent;
border-bottom: 43px solid transparent;
bottom: -43px;
position: absolute;
left: -10px; }

＆＃13;

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

＆＃13;

敏感的倾斜的div与背景

2 个答案: