从顶部到左下角自定义剪切图像

时间:2018-02-18 14:51:05

标签: html css

如何剪切图像(如css和html中所示):

Image

1 个答案:

答案 0 :(得分:0)

您可以使用clip-path。这使您可以在图像顶部指定多边形形状。您可以创建多边形蒙版。

这篇关于css-tricks的文章解释了这个概念:link

这是一个工具,可让您生成自己的剪辑路径,其中包含一组不同的多边形形状:clippy

这里是生成适合您图像的三角形的代码:

-webkit-clip-path: polygon(13% 7%, 13% 88%, 57% 7%);
clip-path: polygon(13% 7%, 13% 88%, 57% 7%);

希望有所帮助!