图像裁剪为在网页上的三角形 [英] image cropped as a triangle on webpage

问题描述

这是一个真正的CSS挑战，我不认为这是可能的：

我做了一些白色 css 三角形。并且当您在三角形上悬停时，白色三角形应该在照片中变化，也会像三角形一样裁剪。我为它做了一个jsfiddle：

fiddleLink

任何帮助感谢

解决方案

以实现此效果： http://jsfiddle.net/xTd6Y/4/

 < div id =image-wrapper> 
< svg id =svg-1class =clip-svg> 
< rect class ='svg-background'width =300height =300fill =＃ffffff/> 
< image id =img-1class ='svg-image'width =300height =300xlink：href =http://lorempixel.com/300/300/> ; 
< / svg> 
< svg id =svg-2class =clip-svg> 
< rect class ='svg-background'width =300height =300fill =＃ffffff/> 
< image id =img-2class ='svg-image'width =300height =300xlink：href =http://lorempixel.com/300/301/> ; 
< / svg> 
< svg id =svg-3class =clip-svg> 
< rect class ='svg-background'width =300height =300fill =＃ffffff/> 
< image id =img-3class ='svg-image'width =300height =300xlink：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; 
} 
 
 / *大小和位置* / 
 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中定义，

图像属性对js和css可见/可访问。
您可以将裁剪路径应用于任何具有

的css的html元素

  myElement {
 clip-path ：url（＃clip-triangle）; 
} 
  

但是这只能在firefox上可靠。 p>

注意：解决方案仅在FF和chrome上测试

注意：小编辑移动 hover 从svg到嵌入的图片，以纠正悬浮在剪裁区域外触发的问题

This is a real css-challenge, I don't think this is possible:

I've made some white css triangles. and when you hover on a triangle, the white triangle should change in a photo also cropped like a triangle. I've made a jsfiddle for it:

fiddleLink

Any help appreciated

解决方案

You can use svg to achieve this effect: 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;
}

The clipping path is defined in svg#svg-defs, and can be set to whatever you like.

Image attributes are visible to / accessible by js and css. You can apply the clipping path to any html element with css of

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

but this is only reliable on firefox so far as I can tell.

Note: solution only tested on FF and chrome

note: small edit to move :hover from the svg to the embedded image, to correct problem with hover triggered outside clip area

这篇关于图像裁剪为在网页上的三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！