使用你的梯度配置内蒙板，然后考虑一个定期的背景为您的分离。我也优化了你的梯度配置：

div {
  width: 640px;
  height: 340px;
  background: linear-gradient(90deg, red 50%,blue 0);
  -webkit-mask: 
    linear-gradient( 45deg, #0000 7px, #000 0 7.5px, #0000 0 10px), 
    linear-gradient(-45deg, #0000 7px, #000 0 7.5px, #0000 0 10px);
  -webkit-mask-size: 10px 10px;
}

<div></div>

您可以同时使用repeating-linear-gradient、background-size、background-position、background-repeat和background-position。所以你可以在不同的区域放置不同大小的渐变
可能的示例：

div {
  border:solid;
   width: 640px;
   aspect-ratio:3/1.5;
   background:
     repeating-linear-gradient( 45deg,transparent 0 7px,red  7px 8px,transparent 8px  10px) 0 0       / 50% 100% no-repeat,
     repeating-linear-gradient(135deg,transparent 0 7px,red  7px 8px,transparent 8px  10px) 0 0       / 50% 100% no-repeat,
     repeating-linear-gradient(225deg,transparent 0 7px,blue 7px 8px,transparent 8px  10px) 100% 0   / 50% 100% no-repeat,
     repeating-linear-gradient(135deg,transparent 0 7px,blue 7px 8px,transparent 8px  10px) 100% 0px / 50% 100% no-repeat
     ivory /* bgcolor */
 }

<div></div>

在半块的顶部，我们将层放置在伪元素中，背景上有一个css过滤器。过滤器属性不同。在我们的例子中，我们应用了一个过滤器，它旋转色调调色板backdrop-filter: hue-rotate(240deg)，使红色变成蓝色。240deg表示顺时针旋转240度。

div {
  width: 640px;
  height: 340px;
  background: linear-gradient(45deg, transparent, transparent 7px, red 7px, red 7.5px, transparent 7.5px, transparent 10px), linear-gradient(-45deg, transparent, transparent 7px, red 7px, red 7.5px, transparent 7.5px, transparent 10px);
  background-size: 10px 10px;
  position: relative;
}

div::after {
  position: absolute;
  left: 50%;
  top: 0;
  display: block;
  width: 50%;
  height: 100%;
  content: '';
  backdrop-filter: hue-rotate(240deg);
}

<div></div>