熱門制作漸變半紅/半藍？-有解無憂

目前整個事情都是紅色的。

我將如何制作這個漸變，左側一半紅色，一半藍色？

這就是我想要在代碼中做的所有事情。

熱門制作漸變半紅/半藍？

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>

uj5u.com熱心網友回復：

使用蒙版內的漸變配置，然后考慮使用常規背景進行分離。我也稍微優化了你的漸變配置：

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>

uj5u.com熱心網友回復：

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>

uj5u.com熱心網友回復：

您可以一起使用repeating-linear-gradient, background-size, background-position, background-repeatand background-positionall 。所以你可以在不同的區域放置不同大小的漸變

可能的例子：

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/523014.html

標籤：css坡度

上一篇：可以通過在別處定義的選擇器簡單地改變CSS樣式

下一篇：DOS命令