Верстка фигуры

[_ZheKA_]

Здравствуйте! Подскажите как можно сверстать вот такую фигуру

 

 

 

Каждая из трех составляющих пентагона должны быть кликабельны (ссылки), а также поверх них должен быть текст.

Для каждой составляющей будет разный фон в виде картинки.

Как все это сделать средствами CSS и HTML? Желательно максимально кроссбраузерно.

Заранее благодарен! 

[Vlad]

Используй <pattern> и <image>

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns

 

http://jsfiddle.net/webref/w1yesyq5/4/

[Galaxy]

С помощью svg

[_ZheKA_]

С помощью svg

Можно подробнее?

[Sensei]

Так сойдёт? http://jsfiddle.net/w1yesyq5/

[_ZheKA_]

Так сойдёт? http://jsfiddle.net/w1yesyq5/

Отлично, а как теперь для каждой отдельной фигурке задать и анимировать фоновое изображение (пример)?

[angangell]

Transform skew в помощь

 

Edited November 7, 2015 by angangell

[_ZheKA_]

Используй <pattern> и <image>

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns

 

http://jsfiddle.net/webref/w1yesyq5/4/

А анимацию этим отдельным картинкам можно задать? Мне банального плавного сдвига достаточно будет

[_ZheKA_]

Всем спасибо за помощь! Сделал как хотел. Конечный результат: https://jsfiddle.net/Chefranov/Lts50x9n/

[Vlad]

В SVG вроде как можно ссылки вставлять, так что без JS можно обойтись.

[_ZheKA_]

В SVG вроде как можно ссылки вставлять, так что без JS можно обойтись.

Был бы весьма благодарен если вы подскажете как сделать в моем случае https://jsfiddle.net/Chefranov/Lts50x9n/

[mrnobody]

https://jsfiddle.net/mrnobody/Lts50x9n/1/

 

UPD:

Вот новый вариант: https://jsfiddle.net/mrnobody/Lts50x9n/2/

Вынес анимацию в стили чтобы при наведении на текст, курсор его не видел (pointer-events: none;)

 

Еще UPD:.

Решил проверить и обнаружил что анимация работает только в Webkit'ах ((

[_ZheKA_]

https://jsfiddle.net/mrnobody/Lts50x9n/1/

Большое спасибо!

[_ZheKA_]

Помогите сделать анимацию плавнее, без подергиваний https://jsfiddle.net/Chefranov/5p6xt6zd/

[Vlad]

Можно попробовать image-rendering применить. Вот для разных браузеров код:

 

image {  image-rendering: auto;  image-rendering: crisp-edges;  image-rendering: pixelated;}

[_ZheKA_]

 

Можно попробовать image-rendering применить. Вот для разных браузеров код:

 

image {  image-rendering: auto;  image-rendering: crisp-edges;  image-rendering: pixelated;}

 

лучше не стало

[Vlad]

Может стоит заменить масштабирование на сдвиг фотографии?

[_ZheKA_]

Vlad, Покажите пример пожалуйста.

[Vlad]

Пример с translate сделал, но он тоже дёргается. Зато мне стало понятно почему. Не надо фотографии размером 1700х1500 вставлять!

[_ZheKA_]

Пример с translate сделал, но он тоже дёргается. Зато мне стало понятно почему. Не надо фотографии размером 1700х1500 вставлять!

Подставил меньшие картинки, но они стали странно отображаться в фигурках и подергивания остались. В чем моя ошибка? https://jsfiddle.net/Chefranov/885bp83L/