Все сервисы Хабра
Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
Закрыть
Задать вопрос
Илья
@Rimush
JavaScript
HTML
CSS
Как нарисовать косую линию с тенью в HTML?
Такое реально сделать?
И что бы оно еще рисовалось на всю ширину окна.
Вопрос задан
более трёх лет назад
624 просмотра
Комментировать
Подписаться
1
Оценить
Комментировать
Facebook
Вконтакте
Twitter
Решения вопроса
1
trushka
@trushka
https://jsfiddle.net/trushka/k6ft6yac/2/
Вот так примерно можно. Ну, если надо, чтоб нижняя полоса была постоянной ширины, то её можно сверху наложить с помощью ::after и transform: skewY(). Ну, и вторую (нижнюю) тень задать уже этому элементу
Ответ написан
более трёх лет назад
Комментировать
Нравится
Комментировать
Facebook
Вконтакте
Twitter
Пригласить эксперта
Ответы на вопрос
2
dom1n1k
@dom1n1k
Фильтр drop-shadow (в отличие от box-shadow) умеет отбрасывать тень от любых форм, включая всякие диагонали.
Хотя я рассмотрел бы самый тупой вариант - сделать этот блок просто фоновой картинкой.
Ответ написан
более трёх лет назад
Комментировать
Нравится
1
Комментировать
Facebook
Вконтакте
Twitter
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Двухцветный градиент под углом + SVG clip-path (чтобы вырезать) и затем тень.
(думаю, что такой порядок)
Ответ написан
более трёх лет назад
Комментировать
Нравится
Комментировать
Facebook
Вконтакте
Twitter
Ваш ответ на вопрос
Войдите, чтобы написать ответ
Войти через центр авторизации
Похожие вопросы
JavaScript
+3 ещё
Простой
React Native или Flutter?
2 подписчика
6 часов назад
191 просмотр
0
ответов
HTML
+1 ещё
Простой
Как на элементах слайдера сделать вертикальный текст прижатый к левому краю и не по всей высоте?
1 подписчик
вчера
68 просмотров
1
ответ
JavaScript
+2 ещё
Простой
Как сделать анимацию прорисовки линии в fabric 6?
1 подписчик
25 мая
70 просмотров
0
ответов
CSS
+1 ещё
Простой
Как устранить конфликт стилей в WordPress?
1 подписчик
25 мая
157 просмотров
1
ответ
JavaScript
Простой
Как заставить скрипт tampermonkey работать?
2 подписчика
23 мая
204 просмотра
2
ответа
JavaScript
+1 ещё
Простой
Как сделать анимацию с отражением на canvas JavaScript?
1 подписчик
23 мая
80 просмотров
1
ответ
JavaScript
Простой
Как добавить класс элементу в кастомном шаблоне Dropzone?
1 подписчик
23 мая
40 просмотров
0
ответов
CSS
+1 ещё
Простой
Как разместить сам flex-контейнер (котором есть перенос по рядам) по центру?
1 подписчик
23 мая
79 просмотров
1
ответ
HTML
+4 ещё
Средний
Продвинутые пользовательские стили сайтов, не ограниченные одним css?
2 подписчика
22 мая
1009 просмотров
4
ответа
HTML
+1 ещё
Простой
Как сделать эффект при наведении как на этом сайте?
2 подписчика
22 мая
484 просмотра
1
ответ
Показать ещё
Загружается…
Вакансии с Хабр Карьеры
JavaScript разработчик
HUNTLIS
•
Москва
от 180 000 до 220 000 ₽
Senior Frontend (JavaScript) разработчик
Vital Partners
от 350 000 до 400 000 ₽
Fullstack JavaScript разработчик
MakeDifference
от 30 000 до 80 000 ₽
Минуточку внимания
Войдите на сайт
Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации
Закрыть
Реклама