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

Тема в разделе "Верстка", создана пользователем 01K, 13 мар 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    291
    Симпатии:
    43
    Добрый день!
    Нужна помощь по созданию данного элемента, как в примере:
    rhombus.jpg

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

    Alekc Постоялец

    Регистр.:
    9 мар 2014
    Сообщения:
    50
    Симпатии:
    26
    Что то вроде Перейти по ссылке?

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

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    291
    Симпатии:
    43
    В приведённом примере только размещение можно взять за пример.
    Думаю, что лучше средствами CSS'а. без картинок
     
  4. Alekc

    Alekc Постоялец

    Регистр.:
    9 мар 2014
    Сообщения:
    50
    Симпатии:
    26
    Да, как я написал не заметил слово трапеция когда делал пример. Если без использования картинок то придется делать что то вроде Перейти по ссылкеНо при этом у меня возникают сомнения насчет кросс броузера. Имхо с картинкой ризультат будет более предсказуемый.
     
  5. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    291
    Симпатии:
    43
    Это я уже видел. Было бы конкретное решение - кроссбраузерность проверить не помеха
     
  6. Alekc

    Alekc Постоялец

    Регистр.:
    9 мар 2014
    Сообщения:
    50
    Симпатии:
    26
    Ну а в чем тогда проблема? У вас есть все елементы, например Перейти по ссылке а дальше сами.

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

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    291
    Симпатии:
    43
    Проблема в том, что у меня не получается заданная фигура
     
  8. Alekc

    Alekc Постоялец

    Регистр.:
    9 мар 2014
    Сообщения:
    50
    Симпатии:
    26
  9. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    291
    Симпатии:
    43
    Только первый пример с позиционированием помог.
    Сделал так: Перейти по ссылке
    Но проблема в том, что не могу правую трапецию отстроить. Что не правильно с углами?
     
  10. Alekc

    Alekc Постоялец

    Регистр.:
    9 мар 2014
    Сообщения:
    50
    Симпатии:
    26
    v rhombus-right:after, .rhombus-right:before поставьте left: -7px;
     
    01K нравится это.