三角形内容显示通过

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>

你可以玩这个。