Как сделать такой градиент? CSS

10 сентября 2021, 20:10

Есть вот такой код :

html {
  .basket(#335, #dde, #aab, 40px);
}
.basket(@background, @to-right, @to-left, @size:25px) {
  background: linear-gradient(45deg, @to-right 12%, transparent 0, transparent 88%, @to-right 0), 
              linear-gradient(135deg, transparent 37%, @to-left 0, @to-left 63%, transparent 0), 
              linear-gradient(45deg, transparent 37%, @to-right 0, @to-right 63%, transparent 0), 
              @background;
  background-size: @size @size;
}

Но я в нем ничего не могу понять, к сожалению Помогите, пожалуйста, реализовать данный градиент с помощью html/css

Answer 1

А что у Вас не получается? Что значит реализовать через css? весь код который Вы написали на css и он рабочий. Если вопрос в том почему ничего на экране не меняется, то прочитайте что такое LESS и для конкретной ситуации что такое миксины. Ниже код для Вас чтобы работал просто скопировав его)

html { 
  background: linear-gradient(45deg, #dde 12%, transparent 0, transparent 88%, #dde 0),  
              linear-gradient(135deg, transparent 37%, #aab 0, #aab 63%, transparent 0),  
              linear-gradient(45deg, transparent 37%, #dde 0, #dde 63%, transparent 0),  
              #335; 
  background-size: 40px 40px; 
}