是否可以像这样使用 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 child div 内的内容不能倾斜，解决方案越少，对所有内容都越好。我希望这可以通过 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

.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

Answer 3

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>

是的，这是可能的，这里有一个粗略的想法。我确信这不是最好的解决方案，但它确实有效。