Css 热门制作渐变半红半蓝

发布于10月29日

目前整件事都是红色的.

我如何使这个渐变，左侧一半是红色，一半是蓝色？

这就是我在代码中试图做的所有事情.

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

<div></div>

推荐答案

使用您的渐变配置内遮罩，然后考虑一个规则的背景为您的分离.我还对您的渐变配置进行了一点优化:

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