使用线性渐变/径向渐变的 css/scss 中的背景图案

Question

只是出于好奇而玩弄这种模式，是否可以在不向 dom 添加更多元素的情况下制作类似于发布的图像的东西？

我对此进行了射击，甚至没有接近，但是...

波形

BODY {
   background: radial-gradient(
                  circle at top,
                  rgba(255, 255, 255, 0) 21px,
                  #fcf2d7 21px,
                  #fcf2d7 28px,
                  rgba(255, 255, 255, 0) 28px
                )
                0 0,
              radial-gradient(
                  circle at bottom,
                  rgba(255, 255, 255, 0) 21px,
                  #fcf2d7 21px,
                  #fcf2d7 28px,
                  rgba(255, 255, 255, 0) 28px
                )
                48px 0,
              radial-gradient(
                  circle at top,
                  rgba(255, 255, 255, 0) 19px,
                  #fdc536 19px,
                  #fdc536 27px,
                  rgba(255, 255, 255, 0) 27px
                )
                0 24px,
              radial-gradient(
                  circle at bottom,
                  rgba(255, 255, 255, 0) 19px,
                  #fdc536 19px,
                  #fdc536 27px,
                  rgba(255, 255, 255, 0) 27px
                )
                48px 24px,
              radial-gradient(
                  circle at top,
                  rgba(255, 255, 255, 0) 19px,
                  #e65848 19px,
                  #e65848 27px,
                  rgba(255, 255, 255, 0) 27px
                )
                0 49px,
              radial-gradient(
                  circle at bottom,
                  rgba(255, 255, 255, 0) 19px,
                  #e65848 19px,
                  #e65848 27px,
                  rgba(255, 255, 255, 0) 27px
                )
                48px 49px,
              radial-gradient(
                  circle at top,
                  rgba(255, 255, 255, 0) 19px,
                  #2ab69d 19px,
                  #2ab69d 27px,
                  rgba(255, 255, 255, 0) 27px
                )
                0 74px,
              radial-gradient(
                  circle at bottom,
                  rgba(255, 255, 255, 0) 19px,
                  #2ab69d 19px,
                  #2ab69d 27px,
                  rgba(255, 255, 255, 0) 27px
                )
                48px 74px;
            background-size: 98px 98px;
            background-color: #343844;
            background-repeat: repeat;
  }

https://codepen.io/ZeljkoVeseljko/pen/eYNRWqz

之字形图案

body {
            content: '';
            z-index: -1;
            background: linear-gradient(135deg, green 32%, rgba(0, 0, 0, 0) 32%),
              linear-gradient(225deg, green 32%, rgba(0, 0, 0, 0) 32%),
              linear-gradient(315deg, green 32%, rgba(0, 0, 0, 0) 32%),
              linear-gradient(45deg, green 32%, rgba(0, 0, 0, 0) 32%), darkgreen;
            background-position: -50px 0, -50px 0, 0 0, 0 0;
            background-size: 100px 100px;
}

<div> 
</div>

https://codepen.io/ZeljkoVeseljko/pen/GRJmdjj

Answer 1

我会使用简单的 SVG 作为背景来制作锯齿形图案：

body::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: 
   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64' width='64' height='64'><path d='M0 48 L0 64 L32 16 L64 64 L64 48 L32 0 Z' fill='%23006700' /></svg>") 0 0,
   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64' width='64' height='64'><path d='M0 48 L0 64 L32 16 L64 64 L64 48 L32 0 Z' fill='%23006700' /></svg>") 0 50px
   green;
  background-size:160px 100px;
}

如果您想编辑 SVG，这里有一个很好的在线工具：https://jxnblk.github.io/paths/?d=M0 48 L0 64 L32 16 L64 64 L64 48 L32 0 Z

只需在链接中添加路径的值，编辑它然后下载 SVG 并在代码中替换它。

如果您只想在这里使用渐变，可以考虑使用蒙版：

body::before,
body::after{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:darkgreen;
  -webkit-mask: 
    linear-gradient(135deg, transparent 32%, white 32%), 
    linear-gradient(315deg, transparent 32%, white 32%), 
    linear-gradient(225deg, transparent 32%, white 32%), 
    linear-gradient(45deg,  transparent 32%, white 32%);
  -webkit-mask-position: -80px 0, 0 0;
  -webkit-mask-size: 160px 140px;
  -webkit-mask-composite: source-in;
  mask: 
    linear-gradient(135deg, transparent 32%, white 32%), 
    linear-gradient(315deg, transparent 32%, white 32%), 
    linear-gradient(225deg, transparent 32%, white 32%), 
    linear-gradient(45deg,  transparent 32%, white 32%);
  mask-position: -80px 0, 0 0;
  mask-size: 160px 140px;
  mask-composite: intersect;
}
body::after {
  transform:translateY(70px);
  top:-140px;
}


body {
  background:green;
}

---

对于波浪形的，您可以查看此链接：How can I create a wavy shape CSS?

例子：

body::before {
  --t:22px;   /* Thickness */
  --h:50px;  /* Height (vertical distance between two curve) */
  --w:180px; /* Width  */
  --p:26.8px;  /* adjust this to correct the position when changing the other values*/
  
  background:
    radial-gradient(farthest-side at 50% calc(100% + var(--p)), transparent 47%, #004254 50% calc(50% + var(--t)),transparent calc(52% + var(--t))),
    radial-gradient(farthest-side at 50% calc(0%   - var(--p)), transparent 47%, #004254 50% calc(50% + var(--t)),transparent calc(52% + var(--t))),
    grey;
    
  background-size:var(--w) var(--h);
  background-position:calc(var(--w)/2) calc(var(--h)/2),0px calc(var(--h)/2);
  
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

Answer 2

好的，这花费了太多时间（2 小时？），但我想玩弄渐变来学习。这不是一个完美的解决方案，因为它很难编辑，所以我自己会使用 SVG。

您可以将背景大小更改为更改图案大小的任何值。困难的部分是图案不是正方形，线条也不是 90 度。您展示的图片具有 270x125 像素的图案。

“透明”部分非常重要，因为顶部的线性渐变在底部渐变上绘制。

body {
    --right-side: 226deg;
    --left-side: 134deg;
    
    --fourthline: 5%;
    --thirdline: 20%;
    --secondline: 36%;
    --firstline: 51%;
    
    --background-height: 270px;
    --background-size-ratio: 2.16;
    
    background:
      linear-gradient(var(--right-side),
        darkgreen var(--fourthline), green var(--fourthline),
        green var(--thirdline),      darkgreen var(--thirdline),
        darkgreen var(--secondline), transparent var(--secondline)),

      linear-gradient(var(--left-side), 
        darkgreen var(--fourthline), green var(--fourthline),
        green var(--thirdline),      darkgreen var(--thirdline),
        darkgreen var(--secondline), green var(--secondline),
        green var(--firstline),      transparent var(--firstline)),

      linear-gradient(var(--right-side),
        green var(--firstline), transparent var(--firstline)),

      darkgreen;
        
    background-size: /* 270px x 125 px */
      var(--background-height)
      calc(var(--background-height) / var(--background-size-ratio));
}