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

[alena967]

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

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

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

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

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

[Pavel666]

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

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

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

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

На данный момент сделала через 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>

 

 

Змінено 2 грудня 2018 користувачем Pavel666

[alena967]

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

[Pavel666]

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

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

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

[alena967]

пробовала(

[Pavel666]

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

[alena967]

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

на локалке он

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

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

[chukcha]

SVG

[Einshtein]

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

[stickpro]

clip-pach должен помочь http://bennettfeely.com/clippy/

[anboza]

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

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

Змінено 2 грудня 2018 користувачем anboza

[alena967]

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

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

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

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

[alena967]

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

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

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

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

[anboza]

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

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

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

да не вопрос. 

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

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

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