如何使用 CSS 对角切割图像或容器的一部分？
需要切掉的部分是三角形
具体来说：如果上图是图片，应该剪掉蓝色部分，而不是黄色部分
html 应该是：
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock">
</figure>
或：
<div class="container">
content
</div>
根据我自己的调查，有很多方法可以做到这一点，但其中大多数都是 hacky，所以寻找最佳方法
最小浏览器支持：IE11、最新的 webkits 等
【问题讨论】：
标签： html css css-shapes
这个有点脏，但是......这是这个想法：
HTML：
body {
background: #eee;
}
figure {
display: inline-block;
overflow: hidden;
padding-left: 20px;
margin-left: -20px;
padding-top: 50px;
margin-top: -50px;
padding-right: 20px;
margin-right: -20px;
height: 200px;
transform: rotate(-10deg);
}
figure img {
transform: rotate(10deg);
}<figure>
<img src="http://placekitten.com/g/560/300" />
</figure>注意：另一种方法是使用伪元素来遮盖图片，但这不会在您应该能够看穿的地方产生真正的“剪切”。
【讨论】：
像这样使用 CSS3 -clip-path 和 polygon。你可以指定任何你想要的路径。
img {
width: 100px;
height: 100px;
-webkit-clip-path: polygon(0 0, 0 100px, 100px 80px, 100px 0);
clip-path: polygon(0 0, 0 100px, 100px 80px, 100px 0);
}<img src="https://picsum.photos/id/0/100/100">【讨论】：
您可以使用pseudo element，结合overflow:hidden;
结果
div {
height: 300px;
width: 300px;
position: relative;
overflow: hidden;
background: url(http://placekitten.com/g/300/300);
}
div:after {
content: "";
position: absolute;
top: 93%;
left: 0;
height: 100%;
width: 150%;
background: red;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
}<div></div>【讨论】：
-您可以为此使用http://cssplant.com/clip-path-generator。
这只是一个“肮脏的解决方案”，最好的方法是在 img 上方放置一个 svg。
也许在未来，“clip css 属性”会支持另一种形状，而不仅仅是“rect”，这样的事情可以做到！
另一种“肮脏方式”是在 img 上方放置一个 div，使用您想要的背景颜色并旋转它！
【讨论】：
只是一个想法：
HTML
<figure>
<img src="http://placehold.it/500x500" alt="">
</figure>
CSS
figure {
position: relative;
display: inline-block;
overflow: hidden;
padding: 0;
line-height: 0;
}
figure:after {
content: '';
position: absolute;
width: 200%;
height: 100%;
left: 0;
bottom: -91%;
background: red;
-webkit-transform: rotate(355deg);
transform: rotate(355deg);
}
演示
【讨论】：