CSS: помогите создать перевёрнутую трапецию

[01K]

Пришлось -10 сделать, т.к. границу линии пересекает.
Тут мне не очень понятно, зачем нужен left, и какое правильное свойство ему задавать?
Ещё не ппроверял, как это поведёт себя при изменении размера окна браузера

 

[Alekc]

Честно говоря особо не вникал, просто по идее вы сверху накладываете повернутый белый прямоугольник, и с помощью лефт нужно было его передвинуть чтобы он правильно покрывал поверхность. Используя файрбаг легко увидеть что именно происходит когда меняются эти показатели.

 

[01K]

Я закинул сюда живой пример, с переработанной верхней частью, сделал ширину в %

Спойлер

Для просмотра ссылки Войди или Зарегистрируйся

Для просмотра ссылки Войди или Зарегистрируйся
Появились 2 проблемы:
1). лишние кусочки в фигуре. Нашёл хак - ширина 105%, но думаю - это не правильное решение
2). при уменьшении окна, фигура наезжает на центральный блок. Тут пока не знаю, что делать...

 

[Alekc]

Лишние кусочки решаются увеличением width s 100% do 105%, а вот с наездами уже сложнее. Дело в том что у вас неправильно стоят "уши". Они должны находится внутри елемента к борту которого они прилипают, у вас же они липнут к внешней рамке.

П.с. сделал пару проб, с данным методом белый прямоугольник накрывает красный борт. Советую использовать картинку как фон и не париться

 

[01K]

Тут такое пожелание заказчика, чтобы уши были между двумя рамками. Пока вижу единственный вариант - прятать их при уменьшении размера окна браузера...



Теперь беда с позиционированием элементов - "ушей"(красные, розовые). Все съезжают при изменении окошка...
У кого какие подсказки будут?

 

[Vishez]

Тут такое пожелание заказчика, чтобы уши были между двумя рамками. Пока вижу единственный вариант - прятать их при уменьшении размера окна браузера...



Теперь беда с позиционированием элементов - "ушей"(красные, розовые). Все съезжают при изменении окошка...
У кого какие подсказки будут?

Потому что у тебя ширина body стоит 100%. Соответственно при уменьшении ширины body, все дочерние элементы тоже уменьшаются в ширине. Советую прописать

.container
{
min-width: 1166px;
}

Ну или другую ширину какая нужна.

По поводу розовых кусочков - они сьезжают потому что у тебя стоят left и top в процентах. То есть если у тебя элемент имеет отступ от левого края - 21% то он и будет всегда иметь такой отступ.

 

[01K]

Спасибо!
Кажется, так стало лучше во всех отношениях.
Осталась одна проблема - при сжимании окошка - левая фигура съезжает и портит таблицу. Что тут можно придумать?
Всё переделал в пиксели. А когда есть смысл указывать координаты в процентах вместо пикселей?

 

[Alekc]

а в координатах есть смысл указывать если делаешь например верстку responsive, и/о для адаптации контента к размеру экрана