Jquery 带背景图案的DIV&；透明底部箭头。如何？

带图案的html标记的背景，带底部透明箭头的块也是带图案的。如何使箭头透明，以便在下方看到背景块

当浏览器窗口更改宽度时，块的背景将移动

截图：

p.S<带有箭头的代码>div将与内部的其他块一起显示

对不起，我的英语很差

如果您使用Cal（），它只适用于i.e.9及以上版本，这将是我的解决方案。 创建两个梯形，而不是遮罩三角形

HTML

---

如果是素色，则可以使用线性渐变作为遮罩：

例如，CSS的箭头高度为50px

 background:
    linear-gradient(to right,white,white) no-repeat bottom  right,
    linear-gradient(to right,white,white) no-repeat bottom left,
    linear-gradient(  225deg,  transparent 60.2%, white 60%) bottom center no-repeat ,  
    linear-gradient( -225deg,  transparent 60.2%, white 60%) bottom center  no-repeat ,   
    linear-gradient(to left,purple,lime)/* last is your pattern */;
  background-size:45% 50px, 45% 50px, 200px 50px, 200px 50px, 100% 100%;
;

您可以向元素添加一个最小箭头高度的

填充底部

，以避免在该箭头区域看到内容

这里不需要额外的标记或伪元素来绘制它

---

您可以使用额外标记重叠两个不同的纹理：

 background:
    linear-gradient(to right,white,white) no-repeat bottom  right,
    linear-gradient(to right,white,white) no-repeat bottom left,
    linear-gradient(  225deg,  transparent 60.2%, white 60%) bottom center no-repeat ,  
    linear-gradient( -225deg,  transparent 60.2%, white 60%) bottom center  no-repeat ,   
    linear-gradient(to left,purple,lime)/* last is your pattern */;
  background-size:45% 50px, 45% 50px, 200px 50px, 200px 50px, 100% 100%;
;

---

---

我以为这是你的sreen镜头。您是否也计划在底部使用图案？如果您只需要顶部的图案，这会起作用吗？你能指定吗？也许屏幕截图质量不好，在你放置白色的地方有背景图案。但是如果我没有找到更好的解决方案，我会用你的小把戏。哇，谢谢，我也学到了一些东西，我通常对svg很失望。哈哈哈。Thnx，但这并不是我真正需要的。我找到了解决方案jsbin.com/poneciro/1/edit@user2883821好的，svg掩码是一个好方法。有一个额外的标记，以更接近您的需要：（演示使用太不同的抽象背景。

 background:
    linear-gradient(to right,white,white) no-repeat bottom  right,
    linear-gradient(to right,white,white) no-repeat bottom left,
    linear-gradient(  225deg,  transparent 60.2%, white 60%) bottom center no-repeat ,  
    linear-gradient( -225deg,  transparent 60.2%, white 60%) bottom center  no-repeat ,   
    linear-gradient(to left,purple,lime)/* last is your pattern */;
  background-size:45% 50px, 45% 50px, 200px 50px, 200px 50px, 100% 100%;
;