Отрисовка градиентов

173
05 января 2020, 04:40

Возможно ли реализовать градиент на элементе подобного вида

Здесь присутствует как срез углов, градиент линейный от темного к светлому, так еще и смена цвета линиями повторяющимися по пикселей 5.

Или же вообще не заморачиваться подобной фигней и вставить фон как png?

Answer 1

Главная проблема - это не сам градиент, а его адаптивность, и тут проблема... Для фиксированных размеров всё просто:

body { background-image: url('https://i.stack.imgur.com/m9NKc.png'); } 
 
.grad { 
  position: relative; 
  height: 100px; 
  width: 600px; 
  overflow: hidden; 
  border: 2px solid red; 
} 
 
.grad:after { 
  content: ''; 
  position: absolute; 
  height: 450%; 
  width: inherit; 
  background:  
    repeating-linear-gradient(90deg,  
      rgba(255, 255, 255, 0.07) 0px,  
      rgba(255, 255, 255, 0.07) 10px,  
      rgba(255, 255, 255, 0) 10px,  
      rgba(255, 255, 255, 0) 20px),  
    linear-gradient(180deg,  
      #b7df67,  
      #00af01); 
  transform-origin: center center; 
  transform: translate(0%, -39%) rotate(45deg); 
}
<div class="grad"></div>

READ ALSO
Как на css написать горбик?
CSS

Как на css написать горбик?

Есть блок, хочу сделать плавный переход на белый цвет1 вариант - svg - не шарю, и не хочу кешировать, с png такая же история

 191
Google maps Установка только одного маркера
javascript

Google maps Установка только одного маркера

Прошу помощи так как абсолютно не понимаю в javascript

 202
fusionchart + vue через json
javascript

fusionchart + vue через json

Здравствуйте юзаю fusionchart + vue для всяких диаграмм, возникла проблема при выводе данных через jsonформаты данных разные, но вывод данных со своей...

 207
Получение данных react redux, с фильтром
javascript

Получение данных react redux, с фильтром

Есть экшн для получения задач, который принимает параметр (статус: в работе или нет) При подключении его в компоненте + подключении его в дочернем...

 218