圖像裁剪作爲網頁

Question

三角這是真正的CSS-挑戰，我不認爲這是可能的：

我做了一些白色css三角形。當你懸停在一個三角形上時，白色三角形應該變成一張像三角形一樣裁剪的照片。我做了一個的jsfiddle吧：

fiddleLink

任何幫助表示讚賞

Answer 1

您可以使用SVG來實現這種效果：http://jsfiddle.net/xTd6Y/4/

<div id="image-wrapper"> 
    <svg id="svg-1" class="clip-svg"> 
     <rect class='svg-background' width="300" height="300" fill="#ffffff" /> 
     <image id="img-1" class='svg-image' width="300" height="300" xlink:href="http://lorempixel.com/300/300" /> 
    </svg> 
    <svg id="svg-2" class="clip-svg"> 
     <rect class='svg-background' width="300" height="300" fill="#ffffff" /> 
     <image id="img-2" class='svg-image' width="300" height="300" xlink:href="http://lorempixel.com/300/301" /> 
    </svg> 
    <svg id="svg-3" class="clip-svg"> 
     <rect class='svg-background' width="300" height="300" fill="#ffffff" /> 
     <image id="img-3" class='svg-image' width="300" height="300" xlink:href="http://lorempixel.com/300/302" /> 
    </svg> 
</div> 
<svg id="svg-defs"> 
    <defs> 
     <clipPath id="clip-triangle"> 
      <polygon points="0, 200 100, 0 200, 200"/> 
     </clipPath> 
    </defs> 
</svg> 

CSS

body { 
    background-color: #e0e0e0; 
} 
#image-wrapper { 
    position: relative; 
} 
.svg-background, .svg-image { 
    clip-path: url(#clip-triangle); 
} 
.svg-image { 
    visibility: hidden; 
} 
.clip-svg .svg-image:hover { 
    visibility: inherit; 
} 

/* size and positioning */ 
svg.clip-svg { 
    position: absolute; 
    height: 250px; 
    width: 250px; 
} 
#svg-1 { 
    top: 110px; 
    left: 50px; 
} 
#svg-2 { 
    top: 40px; 
    left: 140px; 
} 
#svg-3 { 
    top: 160px; 
    left: 250px; 
} 

剪切路徑在svg＃svg-defs中定義，並且可以b e設置爲任何你喜歡的。

圖像屬性對js和css可見/可訪問。 您可以將剪輯路徑的任何HTML元素的

myElement { 
    clip-path: url(#clip-triangle); 
} 

CSS但這只是在Firefox可靠到目前爲止，我可以告訴。

注：解決方案只在FF和Chrome測試

注：小編輯從SVG移動:hover到嵌入圖像，與懸停引發外界的剪裁區域