使用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;
}

在给定的示例中，有两个元素，但在一起使它看起来像我想要的那样。如果我把梯度放在一起，我只会得到条带。我试了很多，但我不知道如何创建箭头。具有多个渐变的背景混合模式。

我不确定这是否可能。但我正在寻找一种没有外部背景的解决方案-图像。如果不能很好地解释原因，那就更好了。

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>

​

Answer 2

经过一些研究后，我发现解决方案是叠加不同的背景，只使用半高作为上层背景。它看起来就像这样

.combo {
  height: 10em;
  background:
  repeating-linear-gradient(
      45deg,
      lightgray,
      lightgray 33.33%,
      gray 33.33%,
      gray 66.66%
  ),
  repeating-linear-gradient(
      135deg,
      gray,
      gray 25%,
      lightgray 25%,
      lightgray 50%
  );
  background-size: 10em 50%, 10em 100%;
  background-repeat: repeat-x, repeat-x;
}

尽管如此，这可能不是最好的解决方案，因为它只有在容器的高度已知并固定的情况下才有效。