是否可以像这样用CSS裁剪DIV的一侧？

Question

我有一个父母div和一个孩子，其ID和尺寸如下图所示：

<div id="clip"> 
  <div id="page"> 
     <!-- Content/Images here -->
  </div>
</div>

父级和子级div的尺寸如下：

#clip {
  height: 1000px;
  width: 1414px;
}

#page {
  height: 1000px;
  width: 707px; 
}

现在，我想在div处将孩子angle ø的一侧倾斜，并修剪div的右侧，就像这样：

是否可以仅使用CSS来做到这一点？

  

约束：不能使用三角形边界hack，＃page子项div中的内容不能倾斜，hack-ey解决方案越少，它对所有内容的作用就越好。我希望可以仅通过CSS3转换来完成此操作，但到目前为止我还没有找到解决方法。

@ksav的答案很接近，但是它仍然使用具有绝对位置的伪：before元素的模糊技术。它不会让我消失 div＃page的剪辑部分，以便它看起来像这样：

Answer 1

您可以使用-webkit-clip-path

#clip {
  height: 1000px;
  width: 1414px;
  background-color: yellow;
}

#page {
  height: 1000px;
  width: 707px; 
  background-color: blue;
  color: white;
  -webkit-clip-path: polygon(0 0, 40% 0, 29% 100%, 0% 100%);
} 

这里是一个示例：https://codepen.io/rollinglex/pen/ZMNvjY

我发现此站点非常有用：https://bennettfeely.com/clippy/

关于使用js和CSS，这篇文章应该会有所帮助：https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/

Answer 2

div{
  width:50%;
  height:100%;
  position: absolute;
  border: 1px solid black;
}
#parent{
  background: #fff333;
}
#child{
  background: #aaaccc;
  left: 30%;
  transform: skewX(-8deg);
}

<div id="parent">

</div>
<div id="child">
  
</div>

是的，这是可能的，这是一个大概的想法。我确信这不是最好的解决方案，但它可以工作。

Answer 3

.content {
  background: grey;
  position: relative;
 height: 1000px;
  width: 707px; 
}

.content:before {
  background: rgba(255, 255, 255, 0.8);
  position: absolute;
  height: 100%;
  width: 110%;
  transform: skewX(-5deg) translateX(10%);
  transform-origin: bottom left;
  content:'';
}

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet congue aliquam. Etiam efficitur lectus id nulla iaculis dapibus. Phasellus nec nisl bibendum, hendrerit diam at, consequat est. In posuere lorem eget felis venenatis elementum.
    Ut vestibulum a nulla commodo pharetra. Cras accumsan dui a libero faucibus rutrum. Integer sed nunc accumsan, convallis lectus venenatis, iaculis arcu. Pellentesque tincidunt purus eu pulvinar tempus. Nam aliquet orci vel sapien condimentum pharetra.
    In rhoncus vehicula metus, vitae euismod mauris consequat sit amet. Praesent suscipit quam libero, eget semper neque aliquet faucibus.</p>
</div>

Codepen