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

[01K]

Добрый день!
Нужна помощь по созданию данного элемента, как в примере:


Внешние границы - это .container в него помещён внутренний div.
Нужно создать два таких "уха" и поместить их по середине данного блока(внутреннего div'а). Блок адаптивный, поэтому будет меняться пропорция.
Желательно, чтобы фигуру поддерживал капризный старичёк IE8

 

[Alekc]

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

P.s. извиняюсь, не заметил про трапецию. Нельзя использовать граф. background?

 

[01K]

В приведённом примере только размещение можно взять за пример.
Думаю, что лучше средствами CSS'а. без картинок

 

[Alekc]

Да, как я написал не заметил слово трапеция когда делал пример. Если без использования картинок то придется делать что то вроде Для просмотра ссылки Войди или ЗарегистрируйсяНо при этом у меня возникают сомнения насчет кросс броузера. Имхо с картинкой ризультат будет более предсказуемый.

 

[01K]

Это я уже видел. Было бы конкретное решение - кроссбраузерность проверить не помеха

 

[Alekc]

Ну а в чем тогда проблема? У вас есть все елементы, например Для просмотра ссылки Войди или Зарегистрируйся а дальше сами.

p.s. перепутал углы, но суть не меняется.

 

[01K]

Проблема в том, что у меня не получается заданная фигура

 

[Alekc]

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

 

[01K]

Только первый пример с позиционированием помог.
Сделал так: Для просмотра ссылки Войди или Зарегистрируйся
Но проблема в том, что не могу правую трапецию отстроить. Что не правильно с углами?

 

[Alekc]

v rhombus-right:after, .rhombus-right:before поставьте left: -7px;