Ума не приложу как сделать грамотнее

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Андрюха, 19 фев 2015.

  1. Андрюха

    Андрюха

    Регистрация:
    19 фев 2015
    Сообщения:
    5
    Симпатии:
    0
    Привет спецы и гуру вёрстки!
    Перепробовал много вариантов но никак не могу сообразить как лучше сделать вот такую штуку:
    [​IMG]
    Вариант с 3d трансформацией так и не прокатил из-за испоганивания хромом
    Нашёл вариант с svg
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="separator separator-bottom" width="100%" height="100" viewBox="0 0 99 100" preserveAspectRatio="none">
    <path d="M0 0 L0 100 L100 0 Z"></path>
    </svg>
    Но разобраться как туда вставлять картинку вместо монотонной заливки так и не получилось.
    подскажите хотя бы куда копать...
    --- Добавлено, 19 фев 2015 ---
    Вот ссылка на фото в нормальном размере http://i052.radikal.ru/1502/ff/d7246c7ae65f.png
     
  2. kama812

    kama812

    Регистрация:
    30 мар 2013
    Сообщения:
    311
    Симпатии:
    194
    не понятно что должно делать то что на картинке.
    на jsfiddle выложи вариант с 3d
     
  3. Андрюха

    Андрюха

    Регистрация:
    19 фев 2015
    Сообщения:
    5
    Симпатии:
    0
    Прошу прощения, не сформулировал толком задачу. Выкладывать долго, если честно, прийдётся писать всё заново, задача с фонами, когда фон имеет не прямоугольную форму а трапецивидную, причём сайт запланирован как адаптивный и трапеция должна быть 100%
    --- Добавлено, 19 фев 2015 ---
    выложил http://jsfiddle.net/hpsmxx3a/
     
  4. kama812

    kama812

    Регистрация:
    30 мар 2013
    Сообщения:
    311
    Симпатии:
    194
    тоже крутил крутил... видел я где то решение похожей задачки, но найти не смог.
    а в svg картинку можешь так добавить http://jsfiddle.net/fp5f4n4w/
     
  5. Андрюха

    Андрюха

    Регистрация:
    19 фев 2015
    Сообщения:
    5
    Симпатии:
    0
    Если вместо зелёного цвета вставить фон он деформируется как и шрифт
    Спасибо, на одну зацепку больше, но, думаю всё-равно задача не решена, нашёл как ссвг тоже выкручиваются, но везде с однотонной заливкой, а мне бы с повторяющимся паттерном(( http://themeforest.net/item/niya-re...na-ready-template/full_screen_preview/6656955
     
  6. kama812

    kama812

    Регистрация:
    30 мар 2013
    Сообщения:
    311
    Симпатии:
    194
    ну тк это ж и был патерн http://jsfiddle.net/fp5f4n4w/1/
     
  7. Андрюха

    Андрюха

    Регистрация:
    19 фев 2015
    Сообщения:
    5
    Симпатии:
    0
    Не разобрался сразу, а нет случайно ссылки где со всеми атрибутами и тэгами формата разобраться, хочу на реальном проекте проверить стыковку паттернов основного блока и svg
     
  8. Андрюха

    Андрюха

    Регистрация:
    19 фев 2015
    Сообщения:
    5
    Симпатии:
    0
    Так и не могу разобраться как сделать мощение изображением. У вас исходное изображение 10х10 в параметрах везде стоит 10 а изображение в фигуре растянуто, как это убрать, какой атрибут за это отвечает? у меня с моим изображением то же самое но он им вообще на "замащивает" а тупо его растягивает на весь треугольник