1

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

введите сюда описание изображения

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

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

1 ответ 1

2

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

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>

7
  • Так а в в чём проблема с адаптивностью? Уголки только?
    – zhurof
    3 апр 2019 в 6:10
  • @zhurof они самые. Но, они напрямую зависят от размера контейнера, и есть подозрение, что простыми вычислениями непосредственно в CSS тут не обойтись.
    – UModeL
    3 апр 2019 в 6:15
  • Можно через директиву @supports добавить вариант с clip-path. В разрешениях, на которых будет видна разница всё равно в IE никто не смотрит
    – zhurof
    3 апр 2019 в 6:19
  • @zhurof ty спорю. Наверняка есть решения, но я пока сам не сталкивался. Если добавите свой вариант, то с меня плюс.
    – UModeL
    3 апр 2019 в 6:21
  • Использовал @supports для браузеров где не используется clip-path и сделал background изображением, вроде встает неплохо 3 апр 2019 в 6:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.