@tikos

Как сделать адаптивный наклонный элемент?

Вот есть кусок макета : https://gyazo.com/e589f5553e2d20f6699ad311acf980ba
Проблема в этом наклонном элементе, который за телефонами, я сделал его через абсолютное позиционирование и border-right:transparent(в конце скину код) .
Все нормально было бы еслибы макет был не резиновый, а т.к. border-right указвается только в пикселях, а не процентах,не знаю как сделать этот наклонный элемент адаптивным. Может есть какие нибудь другие способы реализации этого? Заранее большое спасибо
Вот набросал то как я это сделал:
https://jsfiddle.net/4md7xmjm/1/
  • Вопрос задан
  • 265 просмотров
Пригласить эксперта
Ответы на вопрос 4
dom1n1k
@dom1n1k
Линейный градиент под нужным углом и с нулевой шириной перехода.
Примерно так:
background: linear-gradient(280deg, white 0%, white 50%, silver 50%, silver 100%);
Ответ написан
Комментировать
abyrkov
@abyrkov
JavaScripter
Линейный градиент должен помочь htmlbook.ru/css3-na-primerakh/lineinyi-gradient
Ответ написан
Комментировать
@vlad7576
вот в первом блоке через градиент, во втором через after. У градиента есть небольшой минус- это плохое сглаживание, зачастую наблюдается при контрасте, а вот через after, такого не нет.Да и after поддерживается IE 9,8 ;)
Ответ написан
Комментировать
trushka
@trushka
Вместо процентов можно использовать vw иkb vh. Ну и в сочитании с calc() можно вообще очень много чего делать))
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы