Отрисовка градиентов
125
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>
-
17:01
-
11:24
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47573 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30499 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23641 visits
- Как через css изменить цвет png изображения? 10351 visits
- Blob video url download 9962 visits
- Php curl запрос через прокси с авторизацией 9214 visits
- Работа с captcha vk api 8096 visits
© "hostciti.net" 30.11.2024 | 12:48