Как создать треугольный контейнер для изображения (x-browser)

Question

Как мне создать DIV, содержащий IMG, где DIV разрезает изображение в треугольник, отображая, таким образом, только часть изображения через треугольник.

, так что ...

<div>
   <img src='some_image' />
</div>

Где изображение является квадратом, а DIV, содержащее изображение, является треугольником.http://www.script -tutorials.com / creation-kaleidoscope-using-jquery-and-css / решает эту проблему очень хорошо, за исключением того, что это решение не является дружественным для x-браузера (не т.е.).

http://css3pie.com/ выглядит интересно, однако это зависит от PHP.

Answer 1

Невозможно создать непрямоугольный элемент DOM.

Есть несколько способов взломать его.

Во-первых, есть метод использования границ CSS с различной шириной на каждой стороне элемента, чтобы он выглядел треугольным. Это все еще будет прямоугольник, но он будет выглядеть как треугольник.

Здесь есть учебник по этому вопросу: http://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/

Недостатком этого подхода является то, что он ограничен созданием прямоугольных треугольников. Вы можете объединить несколько из них вместе, чтобы обойти это, но тогда у вас нет ни одного контейнера для вашего изображения.

Альтернативный хакерский способ сделать это - поместить повернутые элементы поверх основного элемента так, чтобы они покрывали соответствующие части изображения и делали его треугольным. Это работает во всех браузерах, хотя IE имеет очень неприятный синтаксис для поворота, и он довольно тяжел для браузера, учитывая, что вы будете использовать его только для создания фигур.

Другим вариантом может быть использование CSS-преобразований. Однако это поддерживается только небольшим количеством современных браузеров, поэтому оно не будет работать для большинства пользователей.

Лучшим подходом может быть использование для этого подходящей графической библиотеки, а не попытка вставить ее в элемент <div>.

Я бы рекомендовал использовать Рафаэль . Это библиотека Javascript, которая может рисовать прямо в браузере, используя SVG (или VML для IE). Тривиально создавать треугольники, используя их, и заполнять их графикой. Смотрите примеры на домашней странице Рафаэля, чтобы начать работу.

Answer 2

В зависимости от того, какой результат вы хотите получить, насколько я знаю, вы не можете сделать треугольник DIV без Transform:; Однако одним из решений было бы размещение div внутри рассматриваемого div с разрезанием PNG наполовину. изображение, показывающее только прозрачную часть до конца. Не уверен, что это приемлемый вариант для вас.