css - 如何在css中裁剪背景图像

Question

实际上我是我有一个透明的背景条纹图像，我将在我的div的背景中重复，但我想以三角形类型裁剪该图像，所以我如何用CSS做到这一点

实际上我拥有的图像

以及我试图达到的预期结果，如下面提到的图像透明条纹图像，所以我如何在 css 中裁剪这个图像

Answer 1

如果您可以设法使用带背景多伙伴时间（管理带不匹配）那么这就是您需要做的演示

<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

这是我的结果：

演示

注意：我是有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 */
}

​</p>