Задать вопрос
@dzho
css

Как сделать такую полоску?

83688d17a00e4109975d12910edc0da9.jpgПривет. Как реализовать такую адаптивную полоску?

Добавил вниз блок, задал postition: absolute
прописал border-width

но на разных разрешениях она не ужимаеться. Ведь не писать для каждого устройства отдельный border-width
Спасибо!
  • Вопрос задан
  • 1003 просмотра
Комментировать
Подписаться 7 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 5
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Немного подкорректировал вариант, предложенный Дмитрий (с использованием псевдоэлемента и border-width), чтобы угол наклона не менялся при изменении размера экрана - codepen
Ответ написан
1 комментарий
1 комментарий
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
Отвечал недавно, как сделать градиентом Как сделать прямоугольник со скошенной нижней гранью?
Ответ написан
Комментировать
Комментировать
@soledar10
html css3 js jquery
https://jsfiddle.net/soledar10/3dLa9d94/
Ответ написан
Комментировать
Комментировать
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Множественный фон из картинки и градиента
background: 
  linear-gradient(to top left, #FFF 0, #FFF 50%, transparent 50.6%,  transparent) bottom no-repeat/ 100% 200px,
  url("http://namonitore.ru/uploads/catalog/other/kapelki_vodi_1600.jpg") no-repeat center center/cover;


В моем примере угол градиента будет меняться в зависимости от ширины блока. Если надо постоянный угол, то нужно указать градус, например, 20deg
https://jsfiddle.net/Lvj166ck/
Ответ написан
Комментировать
Комментировать
@masambrero
Посмотрите вот здесь. Достаточно исчерпывающий материал.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Написать посты на игровую тематику (PlayStation) Telegram, VK
25 апр. 2024, в 16:21
15000 руб./за проект
DevOps настройка Gitlab CICD для проекта c CF Worker
25 апр. 2024, в 16:12
2000 руб./за проект
DevOps
25 апр. 2024, в 16:08
100000 руб./за проект
Ещё заказы