css - 如何在CSS中裁剪背景图片

Question

实际上我有一个透明背景条纹图像，我将在我的div背景中重复，但我想以三 Angular 形裁剪该图像，所以我如何可以用 CSS

做到这一点

其实我有的图

我正在努力实现的预期结果如下图透明条纹图像所示，因此我如何在 css 中裁剪此图像

Answer 1

如果你能设法使用 strip 背景多次(管理 strip 不匹配)那么这就是你需要做的 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);}

编辑:更新了链接