三角形內容顯示通過

Question

嗨，我想創建一個跨瀏覽器的CSS三角面具，也適用於ie10。

繼承人我有什麼http://codepen.io/adamjw3/pen/RoxrNJ但它在ie中不起作用。 任何其他方式做到這一點？

.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

更新：另一個概念爲三角形

.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>

你可以玩這個。