css - Web ページ上の三角形としてトリミングされた画像

Question

これは本当の css チャレンジです。これは不可能だと思います。

白いcss三角形を作りました。三角形にカーソルを合わせると、三角形のようにトリミングされた写真で白い三角形が変化するはずです。私はそれのためにjsfiddleを作りました:

フィドルリンク

どんな助けでも大歓迎

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 で定義されており、好きなように設定できます。

画像属性は、js および css から表示/アクセスできます。次の css を使用して、任意の html 要素にクリッピング パスを適用できます。

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

しかし、これは私が知る限り、Firefoxでのみ信頼できます。

注: ソリューションは FF とクロムでのみテストされています

注：:hoversvgから埋め込み画像に移動するための小さな編集。クリップ領域外でホバーがトリガーされる問題を修正します