尝试在 CSS 中重现具有倾斜边距的剪切效果答案

【问题标题】：Trying to reproduce a clipping effect with slanted margin in CSS尝试在 CSS 中重现具有倾斜边距的剪切效果
【发布时间】：2016-03-04 03:44:58
【问题描述】：

在上述来源中找不到答案。

看起来像两个堆叠的对象（img 和div），其中一个被切片并排列在顶部。请注意，文本也沿着切片的倾斜边距。我应该用什么来获得对角线切片，我应该用什么来实现倾斜边缘？

我怀疑我需要使用clip-path或clipPath，但不确定如何根据图像或div的特定几何形状来实现多边形剪辑，以被剪辑为准。

【问题讨论】：

欢迎来到 Stack Overflow！预计您至少会尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些额外的研究，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。
不使用 Adobe，因此丰富了我的 SEO - 我不清楚这与您的问题有何关系。添加代码时，您应该让问题标题反映问题。
刚开始阅读here，所以还没有代码。
CSS triangle containing text的可能重复
@BSMP，实际上那里的代码并没有实现我的问题。这只是三角形中的居中文本，而不是倾斜的边距。

【解决方案1】：

结帐shape-outside css 属性以使文本跟随倾斜的边距。 read more here

.element {  
  float: left;
  shape-outside: circle(50%);
  width: 200px;
  height: 200px;
}

您可以使用clip-path 来剪辑图像。 Read more here

img {
  width: 200px;
  height: 200px;
  background: url('/path/to/image') center no-repeat;
  clip-path: polygon(0% 100%, 100% 100%, 0% 0%);
}

【讨论】：