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

Question

我有一个父级和一个子级div，其 id 和尺寸如下图所示：

\n\n

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

\n\n

\n\n

父div和子div的尺寸如下：

\n\n

#clip {\n  height: 1000px;\n  width: 1414px;\n}\n\n#page {\n  height: 1000px;\n  width: 707px; \n}\n

\n\n

现在我想将 的一侧从孩子的div处倾斜angle \xc3\xb8并剪掉 的右侧div，如下所示：

\n\n

\n\n

单独用 CSS 可以做到吗？

\n\n

\n

限制：不能使用三角形边框 hack，#page 子项内的内容div不能倾斜，并且解决方案越少 hack，对所有内容都越好。我希望这可以通过 CSS3 转换来完成，但到目前为止我找不到方法。

\n

\n\n

@ksav 的回答很接近，但它仍然使用具有绝对位置的伪 :before 元素的模糊技术。它不允许我消失div#page 的剪切部分，以便它看起来像这样：

\n\n

\n

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/