Перейти к содержанию

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

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

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

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


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

Поделиться сообщением


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

в том то и дело что нельзя

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
7 минут назад, alena967 сказал:

в том то и дело что нельзя

а использовать clip-path?

Поделиться сообщением


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

пробовала(

Поделиться сообщением


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

а вообще неплохо было бы увидеть непосредственно сайт)

Поделиться сообщением


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

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

на локалке он

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

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

Поделиться сообщением


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

SVG

Поделиться сообщением


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

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

Поделиться сообщением


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

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

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

Изменено пользователем anboza

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
50 минут назад, anboza сказал:

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 часа назад, Einshtein сказал:

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
3 минуты назад, alena967 сказал:

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

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

да не вопрос. 

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

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

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

 

Поделиться сообщением


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

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

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

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