Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

Косая линия в макете


 Поделиться

Рекомендованные сообщения

Нужна помощь зала!

Есть шапка, высота которой меняется в зависимости от ширины экрана.

Как думаете как можно реализовать вот такую косую линию, чтоб адекватно вела себя на всех размерах?


image.thumb.png.76129869a3fccfcbdb127b6802a5de88.png

На данный момент сделала через canvas с просчетом в js высоты/ширины от расположения круга с ромбиком.

Но мне не нравится это решение.

Ссылка на комментарий
Поделиться на других сайтах

29 минут назад, alena967 сказал:

Нужна помощь зала!

Есть шапка, высота которой меняется в зависимости от ширины экрана.

Как думаете как можно реализовать вот такую косую линию, чтоб адекватно вела себя на всех размерах?


image.thumb.png.76129869a3fccfcbdb127b6802a5de88.png

На данный момент сделала через canvas с просчетом в js высоты/ширины от расположения круга с ромбиком.

Но мне не нравится это решение.

 

А его нельзя сделать фиксированного размера? И элементы внутри поместить с абсолютным позиционированием

 

Спойлер

.mama {
    position: relative;
    width: 200px;
    height: 200px;
}

.m1 {
    width: 200px;
    height: 60px;
    background: aqua;
    transform: rotate(-45deg);
    position: absolute;
    top: calc(50% - 30px);
}

.m3 {
    width: 80px;
    height: 80px;
    position: absolute;
    background: rebeccapurple;
    border-radius: 100%;
    top: 0;
    right: 0;
}

.m2 {
    width: 80px;
    height: 80px;
    position: absolute;
    background: rebeccapurple;
    border-radius: 100%;
    bottom: 0;
    left: 0;
}

<div class="mama">
 <div class="m1"></div>
 <div class="m2"></div>
 <div class="m3"></div>
</div>

 

 

Изменено пользователем Pavel666
Ссылка на комментарий
Поделиться на других сайтах

я понимаю что ванговать по картинке сложно)

на локалке он

недоделанный выносить смысла нет

там проблема что именно гуляют размеры высоты и ширины этого блока, соответственно имеем только начальную точку

Ссылка на комментарий
Поделиться на других сайтах

Если высота предсказуемая более менее - можно не париться и прописать для каждого разрешения свою картинку. Либо лепить все эти линии и кружки не через изображение, а через css, но я бы лучше повесился

Ссылка на комментарий
Поделиться на других сайтах


в чем проблема, JS решает этот вопрос, прямо таки без потребления ресурсов!

а SVG - вообще все решает!

Изменено пользователем anboza
Ссылка на комментарий
Поделиться на других сайтах

50 минут назад, anboza сказал:

а SVG - вообще все решает!

про svg можно подробнее?

я что-то не догоняю)

Ссылка на комментарий
Поделиться на других сайтах

2 часа назад, Einshtein сказал:

Либо лепить все эти линии и кружки не через изображение, а через css, но я бы лучше повесился

я сначала именно так и начала и почти повесилась:ugeek:

нарисуют ,блин, дизайнеры хрень всякую

Ссылка на комментарий
Поделиться на других сайтах

3 минуты назад, alena967 сказал:

про svg можно подробнее?

я что-то не догоняю)

да не вопрос. 

Создаете файлы, формата SVG, которые являются векторными (т.е. фактически текстовый), в него можно внести все настройки CSS, для всех вариантов отображения (комп, планшет, смартфон). 

Этот тип файлов, поддается настройке и перенастройке, по мере надобности.

Очень удобно и масса перспектив )
Если технически подробнее, пишите в личку, подскажу

 

Ссылка на комментарий
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.