如何在CSS中裁剪背景图像

Question

其实我有一个透明背景条纹图像，我将在我的 div 的背景中重复但我想以三角形类型裁剪图像所以我怎么样可以用 CSS

来做到这一点

实际上我有的图像

我想要实现的预期结果，如下所述图像透明条纹图像，以便我如何在css中裁剪此图像

Answer 1

如果您可以设法使用条带背景倍数（管理条带不会不匹配），那么您需要执行此操作 DEMO

<div id="d1">
  <div id="d2"></div>
  <div id="d3"></div>
  <div id="d4"></div>
</div>

<强> CSS

#d1 {background:#f00;
height: 80px;
width: 400px; position:relative}

#d4{background:rgba(0,0,0,.5);height:80px; width:340px; left:60px; position:absolute;}

#d2{position:absolute;font-size:0px;left:20px;width: 0px; border-top: 40px solid red;
border-right: 40px solid rgba(0,0,0,.5);-webkit-transform:rotate(270deg);}

#d3{position:absolute;font-size:0px;left:20px;top:40px;width: 0px;
border-top: 40px solid red;
border-right: 40px solid rgba(0,0,0,.5);}

编辑：更新了链接

Answer 2

这是我的结果：

Demo

注意：我使用rgba背景进行了操作，但我非常确定您也可以使用border-image进行此操作。

HTML：

<div id="bgWrapper">
<div id="retina"></div>
</div>​

CSS：

#bgWrapper {
    background:url(main-background-image.jpg) top left no-repeat;
    height:6em;
    position:relative;
}
#retina {
    position:absolute;
    top:0; left:8em; right:0; bottom:0;
    background:rgba(255,255,255,0.4);
}
#retina:before {
    content:" ";
    position:absolute;
    top:0; left:-6em; bottom:0;
    width:3em;
    border-left:3em solid transparent;
    border-top:3em solid rgba(255,255,255,0.4); /* same as #retina background */
    border-bottom:3em solid rgba(255,255,255,0.4); /* same as #retina background */
}