Html 使用 CSS 对角切割图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29259935/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cutting image diagonally with CSS
提问by Doff3n
How to cut away part of an image or container diagonally using CSS?
如何使用 CSS 对角切掉图像或容器的一部分？
The part that needs to be cut away has the form of a triangle
需要切掉的部分呈三角形
To be more specific: if the above picture is the image the blue part should be cut out, not the yellow
更具体地说：如果上图是图像，则应剪掉蓝色部分，而不是黄色部分
The html should be:
html 应该是：
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock">
</figure>
or:
或者：
<div class="container">
content
</div>
There is from my own investigation a lot of ways to do this, but most of them is hacky, so looking for a best approach
我自己的调查有很多方法可以做到这一点，但大多数方法都很笨拙，因此正在寻找最佳方法
Min browser support: IE11, latest webkits etc.
最小浏览器支持：IE11、最新的 webkits 等。
采纳答案by Roope
Use CSS3 -clip-pathand polygonlike this. You can specify whatever path you want to.
使用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">For some extra bits you might want to take a look at e.g. this. Also, for more information about IE, see this.
回答by jbutler483
You could use a pseudo element, combined with overflow:hidden;
你可以使用pseudo element, 结合overflow:hidden;
Result
结果
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>回答by bob6664569
This one is a little bit dirty but... Here is the idea :
这个有点脏，但是......这是想法：
HTML:
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://placehold.it/502x260&text=Random+Image" />
</figure>Note: Another method could be using a pseudo-element to mask the picture, but this will not produce a real "cut" where you should be able to see through.
注意：另一种方法可能是使用伪元素来掩盖图片，但这不会产生真正的“剪切”，您应该能够看透。
回答by insertusernamehere
Just an idea:
只是一个想法：
HTML
HTML
<figure>
<img src="http://placehold.it/500x500" alt="">
</figure>
CSS
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);
}
Demo
演示
回答by Anfuca
-You can use http://cssplant.com/clip-path-generatorfor this.
- 您可以为此使用http://cssplant.com/clip-path-generator。
It's just a "dirty solution", the best way is placing a svg above the img.
这只是一个“肮脏的解决方案”，最好的方法是在 img 上方放置一个 svg。
Maybe in a future, the "clip css property" would support another kind of shapes than just "rect" and things like this could be done!
也许在未来，“clip css 属性”将支持另一种形状，而不仅仅是“rect”，这样的事情可以完成！
Another "dirty way" is putting a div above the img, with the background-color that you want and rotate it!
另一种“肮脏的方式”是在 img 上方放置一个 div，带有您想要的背景颜色并旋转它！
