CSS3转角裁剪图像

Question

是否有一种css3方法可以让您对角线裁剪图像？

我的作品中有一个白色/灰色的盒子 - 用于纯色 -

.item:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-top: 40px solid #dddddd;
    border-left: 40px solid #ffffff;
    width: 0;
}


.item:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 40px solid #ffffff;
    border-left: 40px solid #dddddd;
    width: 0;
}

现在的一个重大问题

是多边形正在使用％＆＃39; - 所以如果div的大小不同 - 角落看起来不同

Answer 1

这不是一个非常正确的尺寸，你必须根据你的图像高度/宽度进行调整，但这里有一个可行的小例子：

＆＃13;

＆＃13;

prime(18)

＆＃13;

.clipit {
  max-width:100%;
  height:auto;
  -webkit-clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% calc(0% + 30px), 100% 100%, calc(0% + 30px) 100%, 0% calc(100% - 30px));
  clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% calc(0% + 30px), 100% 100%, calc(0% + 30px) 100%, 0% calc(100% - 30px));
}

＆＃13;

＆＃13;

＆＃13;

此页面对您非常有用：http://bennettfeely.com/clippy/

基本上：<img class="clipit" src="http://images.freeimages.com/images/previews/865/stairs-of-light-1532779.jpg" />：

• 点1为0％（宽度），0％（高度）
• 第2点为100％ - 30px（宽度），0％（高度）
• 第3点为100％（宽度），0％+ 30px（高度）
• 等

Answer 2

我想我明白了。你必须使用clip-path：

    .item{
      -webkit-clip-path: polygon(75% 0, 100% 25%, 100% 100%, 25% 100%, 0 75%, 0 0);
      clip-path: polygon(75% 0, 100% 25%, 100% 100%, 25% 100%, 0 75%, 0 0);
    }

这是一个带有背景的图像和div的示例： http://codepen.io/nilestanner/pen/vXOZmG

您无法在此处创建自己的多边形：http://bennettfeely.com/clippy/

Answer 3

查看此网站http://bennettfeely.com/clippy/

您可以设计自己的剪辑路径角度。 （Designer似乎不适用于Firefox）

-webkit-clip-path: polygon(0 10%, 10% 0, 100% 0%, 100% 90%, 90% 100%, 0% 100%);
clip-path: polygon(0 10%, 10% 0, 100% 0%, 100% 90%, 90% 100%, 0% 100%);

10％是左上角，90％是右下角。

example image