Форма треугольника с фоновым изображением

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

Вот мой макет, как бы мне хотелось два треугольника.

Треугольники с фоновой картиной

В настоящее время у меня есть только два div, которые охватывают 900×600 с каждым треугольником в качестве фонового изображения. Проблема, с которой я сейчас сталкиваюсь, это то, что я не могу нависать над прозрачной частью кинотеатра, чтобы добраться до фото div.

Могу ли я выполнить этот проект с помощью треугольников css3 и установить их фоновые изображения? Я всегда думал, что пользовательская форма состоит из границы с пограничным цветом.

Можно ли использовать треугольники css3, и если да, может ли кто-нибудь помочь мне с кодом?

Вот что я сейчас имею.

.pageOption { position: relative; width: 900px; height: 600px; } .pageOption .photo { position: absolute; top: 0px; left: 0px; width: 900px; height: 600px; background: url('../images/menuPhoto.png') no-repeat 0 0; } .pageOption .cinema { position: absolute; bottom: 0px; right: 0px; width: 900px; height: 600px; background: url('../images/menuCinema.png') no-repeat 0 0; } 
 

4 Solutions collect form web for “Форма треугольника с фоновым изображением”

Это очень просто, если вы используете дочерние образы для ссылок вместо фоновых изображений. Вам просто нужно .option два элемента .option с разными истоками трансформации, затем разбить их дочерние образы и установить overflow: hidden на обоих .pageOption и элементах .option . Поддержка хороша, должна работать на все, кроме IE8 / 7 и Opera Mini.

DEMO

Результат :

треугольные изображения

HTML :

  

Соответствующий CSS :

 .pageOption { overflow: hidden; position: relative; width: 40em; height: 27em; } .option, .option img { width: 100%; height: 100%; } .option { overflow: hidden; position: absolute; /* arctan(27 / 40) = 34.01935deg * need to skew by 90deg - 34.01935deg = 55.98065deg */ transform: skewX(-55.98deg); } .option:first-child { left: -.25em; transform-origin: 100% 0; } .option:last-child { right: -.25em; transform-origin: 0 100%; } .option img { transform: skewX(55.98deg); transform-origin: inherit; } 

Вот мои предложения CSS:

  1. Использование canvasа, который является тегом HTML5 и не является перекрестным браузером.
  2. Использование SVG . (Самый надежный)
  3. Используя CSS3, вращайте переход и покройте его в оболочке со скрытым переполнением. Опять же не перекрестный браузер.

Поворот:

 -webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome -moz-transform: rotate(7.5deg); /* FF3.5+ -ms-transform: rotate(7.5deg); /* IE9 -o-transform: rotate(7.5deg); /* Opera 10.5 transform: rotate(7.5deg); filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand'); 

Вы можете достичь этого макета с помощью нескольких подходов. Вот пример использования встроенного svg и элемента клипа :

             

Как вы сказали, css3 tringles сделаны из границ, поэтому вы не можете прикреплять к ним фоны.

Я предлагаю вам просто использовать два PNG один на другой и использовать js для прослушивания события клика и создания правильного действия на основе положения мыши.

Существует также свойство webkit-mask css, но оно очень не поддерживается в других браузерах (я использовал его для небольшого рекламного трюка для прокрутки – http://jsfiddle.net/xTNTH/3/ – лучше всего на safari [нет js only css] – http://snag.gy/7fRNq.jpg )

  • Удаление преобразований в файлах SVG
  • Открытие * .svg с IE9 вызывает диалог «Открыть, Сохранить как»
  • Рисуем SVG на canvasе HTML5 с поддержкой элемента font
  • Как разместить треугольники стрелки на линиях SVG?
  • Вставить SVG в SVG?
  • Как масштабировать SVG-изображение, чтобы заполнить окно браузера?
  • Как использовать маркеры SVG в API Карт Google v3
  • Как изменить цвет изображения SVG с помощью CSS (замена изображения SVG jQuery)?
  • Способ преобразования canvasа HTML5 в SVG?
  • Поддерживает ли SVG встраивание растровых изображений?
  • Пакетное преобразование изображений SVG в нужный размер PNG или ICO
  • Interesting Posts

    Передача данных из одной активности в другую с помощью пакета – не отображение во второй активности

    Могу ли я использовать список как hash в R? Если да, то почему это так медленно?

    Почему «не найти», как мне кажется, это нужно?

    Установите удаленный каталог UNIX в Windows 7

    Неверный способ обработки fragmentации при изменении ориентации

    Получение 3D-ускорения в Windows 7 64bit на Mac Boot Camp?

    Хосту ‘xxx.xx.xxx.xxx’ не разрешено подключаться к этому серверу MySQL

    Привязать к методу в WPF?

    Добавление начальных нhive с использованием R

    Сортировка коллекций (список , метод сравнения )

    jquery-ui-dialog – Как подключиться к событию закрытия диалогового windows

    Как я могу узнать, является ли моя Windows 32-битной или 64-битной?

    Как получить backspace \ b для работы в консоли Eclipse?

    Редактирование файлов ресурсов без повторной компиляции приложения ASP.NET

    Стандартные типы сортировки библиотек и пользовательские типы

    Давайте будем гением компьютера.