фоновые паттерны в css / s css с использованием линейного градиента / радиального градиента

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

---

Для волнистой вы можете проверить эту ссылку: Как создать волнистую форму 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));
}