Лучший способ отображения изображения в форме

Question

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

Answer 1

Вы можете использовать html5 холст:

http://jsfiddle.net/HDqE8/

Альтернативы без html5 использует маскирование изображение (изображение с прозрачной частью в середине, с формой вы хотите , а остальное - с фоновым цветом). Затем вам просто нужно наложить 2 изображения и поставить первый сверху. Изображение может быть также svg.

Answer 2

Есть несколько способов сделать это, вы просто должны оценить различную степень поддержки браузера для каждого:

CSS Маски делают это очень хорошо:

http://thenittygritty.co/css-masking

Но я думаю, что они вероятно, имеют худшую поддержку браузера.

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

То, как я, вероятно, сделаю это, будет с хакерским использованием transform: rotate();

.image-shape { 
    height: 150px; 
    background: url(http://imagz.inspiredmagz.netdna-cdn.com/wp-content/uploads/2013/05/3D-Illustrations-by-JR-Schmidt-08.jpg); 
    position: relative; 
} 
.image-shape .point { 
    width: 50px; 
    height: 50px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    position: absolute; 
    bottom: -25px; 
    right: -25px; 
    background: #777; 
    overflow: hidden; 
} 
.image-shape .point img { 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    position: absolute; 
    top: -275px; 
    left: -85px; 
} 

Где у вас есть DIV с фоном набор изображений, а затем другой DIV повернут на 45 градусов и расположение, чтобы сформировать «точку» в нижней части. Внутри этого изображения вы поместите изображение, поверните его назад на 45 градусов и расположите его так, чтобы оно совпало с фоновым изображением первого div. (позиционирование - это боль, из-за поворотов, но пока это не нужно масштабировать, как только вы это сделаете, хорошо идти.

Дополнительные части изображения обрезаны, установив overflow: hidden; на точку . ДИВ, а затем снова на главном контейнере DIV вокруг всего этого

Смотрите эту скрипку для HTML и остальные CSS:

http://jsfiddle.net/BszC3/

причина, по которой я хотел бы использовать этот метод является потому что вращение относительно хорошо поддерживается и может быть достигнуто в IE с их владельцем аристые фильтры:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */ 

Недостатком является то, что это честная работа и кажется полным хаком.

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