모양에 이미지를 표시하는 가장 좋은 방법

Question

누구에게도 이런 이미지를 표시하는 가장 좋은 방법은 누구에게 말해 줄 수 있습니까? 당신이 좋아하는 모양으로,

http://jsfiddle.net/HDqE8/

HTML5없는 대안은 마스킹 이미지 (중간에 투명한 부분이있는 이미지를 사용하고 있습니다 :

는

Answer 1

당신은 html5 캔버스를 사용할 수 있습니다 , 나머지는 배경색). 그런 다음 2 개의 이미지를 겹쳐서 맨 위에 놓아야합니다. 이미지는 또한 svg 일 수 있습니다.

CSS 마스크가 정말 잘 이렇게 :

http://thenittygritty.co/css-masking

을하지만 나는 그들이 생각

Answer 2

그것을 할 여러 가지 방법이 있습니다, 당신은 각각의 브라우저 지원의 다양한 수준을 평가해야 아마 최악의 브라우저를 지원합니다.

나는 또한 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; 지점을 잘라내어 추가 부분을 잘라냅니다. .

http://jsfiddle.net/BszC3/

나는이 방법을 사용하는 이유는

: DIV 후 다시이 모든 주변의 주요 컨테이너 사업부에

html로이 바이올린과 CSS의 나머지 부분을 참조하십시오 회전이 비교적 잘 지원되기 때문에 IE에서 자신의 소유주와 함께 달성 될 수 있습니다 ary 필터 :

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로 신경 쓰지 않는 것입니다.