css - 使用重复渐变和混合模式使用 CSS 创建带箭头的背景

Question

我想创建一个带有箭头的背景。在此代码笔中看起来像的东西:http://codepen.io/DaSch/pen/rrWAmy

.top {
  height: 5em;
  background:
  repeating-linear-gradient(
     45deg,
     lightgray,
     lightgray 25%,
     gray 0,
     gray 50%
  );
  background-size: 5em 5em;
}
.bottom {
  height: 5em;
  background:
  repeating-linear-gradient(
    135deg,
    lightgray,
    lightgray 25%,
    gray 0,
    gray 50%
  );
  background-size: 5em 5em;
}

在给定的示例中，有两个元素，但在一起使它看起来像我想要的那样。如果我把渐变放在一起，我只会得到 strip 。我尝试了很多，但我无法弄清楚如何创建箭头。具有多个渐变背景混合模式。

我不确定这是否可行。但我正在寻找没有外部背景图像的解决方案。如果不可能有一个很好的解释为什么会很好。

Answer 1

这是我的。它看起来像一个箭头，可以使用 JavaScript 重复。我不能用纯 CSS 做到这一点。也许这个解决方案可以让您对代码有所了解。

.top {
  height: 5em;
  width:80px;
  margin-left:120px;
  background:
  repeating-linear-gradient(
		45deg,
		white,
		white 25%,
		gray 0,
		gray 50%
	);
  background-size: 5em 5em;
}
.bottom {
  height: 5em;
  width:80px;
  margin-left:120px;
  background:
  repeating-linear-gradient(
		135deg,
		white,
		white 25%,
		gray 0,
		gray 50%
	);
  background-size: 5em 5em;
}

.middle
{
  background-color:gray;
  height:30px;
  width:200px;
  margin-right:10px;
  
}

.maskCornerTop
{
  width:40px;
  height:40px;
  position:relative;
  background-color:white;
  float:right;
}

.maskCornerBottom
{
  width:40px;
  height:40px;
  background-color:white;
  float:right;
  margin-top:40px;
  position:relative;
}

<div class="top"><div class="maskCornerTop"></div></div>
<div class="middle"></div>
<div class="bottom"><div class="maskCornerBottom"></div></div>
<br/>
<div class="combo"></div>