コンテンツが表示されている三角形

Question

こんにちは私はie10で動作するクロスブラウザCSS三角マスクを作成しようとしています。

heres私はhttp://codepen.io/adamjw3/pen/RoxrNJを持っていますが、それは動作しません。 これを行う方法は他にありますか？

.slider { 
     -webkit-clip-path: polygon(0 0, 68% 81%, 100% 0); 
     clip-path: polygon(0 0, 68% 81%, 100% 0); 
     overflow: hidden; 
     margin: 0 auto; 
     width: 30%; 
     } 

    img { 
     height: 100%; 
     width: 100%; 
     max-width: 100%; 
    } 

Answer 1

IEではサポートされていません。あなたは別のアプローチを考えることができます。なぜあなたはcssで三角形を作ってその内部に画像を保持しないのですか？

ここで詳細情報

http://caniuse.com/#search=clip-path

UPDATE：三角形あなたがこれで遊ぶことができる

.box1 { 
 
    width: 232px; 
 
    height: 180px; 
 
    border-bottom: 1px solid #000; 
 
    overflow: hidden; 
 
} 
 
.box2 { 
 
    position: relative; 
 
    overflow: hidden; 
 
    transform: rotate(45deg) skew(10deg, 10deg); 
 
    border-left: 1px solid #000; 
 
    border-top: 1px solid #000; 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 81px 0 0 16px; 
 
} 
 
.box2_bg { 
 
    position: absolute; 
 
    width: 200%; 
 
    height: 200%; 
 
    top: -50%; 
 
    left: -50%; 
 
    z-index: -1; 
 
    background: url(https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg); 
 
    background-size: 100%; 
 
    background-position: center top; 
 
    transform: skew(-10deg, -10deg) rotate(-45deg); 
 
    transition: .3s; 
 
    background-size: 50%; 
 
} 
 
.box2_bg:hover { 
 
    background-size: 90%; 
 
}

<div class="box1"> 
 
    <div class="box2"> 
 
    <div class="box2_bg"></div> 
 
    </div> 
 
</div>

ためのもう一つのコンセプト。